ThemeDatabase All Themes

Color themes

• 

  Midnight Echo

• 

  Midnight Embers

• 

  Midnight Emerald

• 

  Midnight Flames

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

• activityBar.background#101010
• activityBar.dropBackground#6C6F9380
• activityBar.foreground#D5D8DAB3
• activityBarBadge.background#f0a500
• activityBarBadge.foreground#06060C
• badge.background#2E303E
• badge.foreground#D5D8DA
• breadcrumbPicker.background#232530
• button.background#2E303E
• debugToolBar.background#1C1E26
• diffEditor.insertedTextBackground#09F7A01A
• diffEditor.removedTextBackground#F43E5C1A
• dropdown.background#101010
• dropdown.listBackground#2E303E
• editor.background#101010
• editor.findMatchBackground#6C6F9380
• editor.findMatchHighlightBackground#6C6F934D
• editor.findRangeHighlightBackground#6C6F931A
• editor.hoverHighlightBackground#6C6F934D
• editor.lineHighlightBackground#2E303E4D
• editor.rangeHighlightBackground#2E303E80
• editor.selectionBackground#2E303EB3
• editor.selectionHighlightBackground#6C6F934D
• editor.wordHighlightBackground#6C6F9380
• editor.wordHighlightStrongBackground#6C6F9380
• editorBracketMatch.background#6C6F9380
• editorBracketMatch.border#6C6F9300
• editorCodeLens.foreground#6C6F9380
• editorCursor.background#101010
• editorCursor.foreground#f0a500
• editorError.foreground#F43E5C
• editorGroup.border#1A1C23
• editorGroup.dropBackground#6C6F934D
• editorGroupHeader.tabsBackground#101010
• editorGutter.addedBackground#09F7A0B3
• editorGutter.deletedBackground#F43E5CB3
• editorGutter.modifiedBackground#21BFC2B3
• editorIndentGuide.activeBackground#2E303E
• editorIndentGuide.background#2E303E80
• editorLineNumber.activeForeground#CCCCCC
• editorLineNumber.foreground#D5D8DA80
• editorOverviewRuler.addedForeground#09F7A080
• editorOverviewRuler.border#2E303EB3
• editorOverviewRuler.bracketMatchForeground#D5D8DA80
• editorOverviewRuler.deletedForeground#F43E5C80
• editorOverviewRuler.errorForeground#F43E5CE6
• editorOverviewRuler.findMatchForeground#6C6F93
• editorOverviewRuler.modifiedForeground#21BFC280
• editorOverviewRuler.warningForeground#27D79780
• editorRuler.foreground#6C6F934D
• editorSuggestWidget.highlightForeground#f0a500
• editorWarning.foreground#27D797B3
• editorWidget.background#101010
• editorWidget.border#101010
• errorForeground#F43E5C
• extensionButton.prominentBackground#f0a500
• extensionButton.prominentHoverBackground#e45826
• focusBorder#1A1C23
• foreground#D5D8DA
• gitDecoration.addedResourceForeground#27D797B3
• gitDecoration.deletedResourceForeground#F43E5C
• gitDecoration.ignoredResourceForeground#D5D8DA4D
• gitDecoration.modifiedResourceForeground#FAB38E
• gitDecoration.untrackedResourceForeground#27D797
• input.background#101010
• inputOption.activeBorder#E9436D80
• inputValidation.errorBackground#F43E5C80
• inputValidation.errorBorder#F43E5C00
• list.activeSelectionBackground#2E303E80
• list.activeSelectionForeground#f0a500
• list.dropBackground#6C6F9380
• list.errorForeground#F43E5CE6
• list.focusBackground#2E303E80
• list.focusForeground#D5D8DA
• list.highlightForeground#f0a500
• list.hoverBackground#2E303E80
• list.hoverForeground#D5D8DA
• list.inactiveFocusBackground#2E303E80
• list.inactiveSelectionBackground#2E303E4D
• list.inactiveSelectionForeground#D5D8DA
• list.warningForeground#27D797B3
• panelTitle.activeBorder#f0a500
• peekView.border#1A1C23
• peekViewEditor.background#101010
• peekViewEditor.matchHighlightBackground#6C6F9380
• peekViewResult.background#101010
• peekViewResult.matchHighlightBackground#6C6F9380
• peekViewResult.selectionBackground#2E303E80
• peekViewTitle.background#101010
• pickerGroup.foreground#f0a500
• progressBar.background#f0a500
• scrollbar.shadow#16161C
• scrollbarSlider.activeBackground#6C6F9380
• scrollbarSlider.background#101010
• scrollbarSlider.hoverBackground#6C6F934D
• selection.background#6C6F9380
• sideBar.background#101010
• sideBar.dropBackground#101010
• sideBar.foreground#D5D8DA80
• sideBarSectionHeader.background#101010
• sideBarSectionHeader.foreground#D5D8DAB3
• statusBar.background#101010
• statusBar.debuggingBackground#FAB38E
• statusBar.debuggingForeground#06060C
• statusBar.foreground#D5D8DA80
• statusBar.noFolderBackground#101010
• statusBarItem.hoverBackground#2E303E
• statusBarItem.prominentBackground#2E303E
• statusBarItem.prominentHoverBackground#6C6F93
• tab.activeBorder#f0a500
• tab.border#1C1E2600
• tab.inactiveBackground#101010
• terminal.ansiBlue#26BBD9
• terminal.ansiBrightBlue#3FC4DE
• terminal.ansiBrightCyan#6BE4E6
• terminal.ansiBrightGreen#3FDAA4
• terminal.ansiBrightMagenta#F075B5
• terminal.ansiBrightRed#EC6A88
• terminal.ansiBrightYellow#FBC3A7
• terminal.ansiCyan#59E1E3
• terminal.ansiGreen#29D398
• terminal.ansiMagenta#EE64AC
• terminal.ansiRed#E95678
• terminal.ansiYellow#FAB795
• terminal.foreground#D5D8DA
• terminal.selectionBackground#6C6F934D
• terminalCursor.background#D5D8DA
• terminalCursor.foreground#6C6F9380
• textLink.activeForeground#e45826
• textLink.foreground#f0a500
• titleBar.activeBackground#101010
• titleBar.inactiveBackground#101010
• walkThrough.embeddedEditorBackground#232530
• widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).