Skip to main content
Coding Theme

Color themes

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.activeBorder#80CBC4
  • activityBar.background#1B2B34
  • activityBar.border#80CBC430
  • activityBar.dropBackground#607d8b30
  • activityBar.foreground#F7F7F7
  • activityBar.inactiveForeground#607d8b
  • activityBarBadge.background#80CBC4
  • activityBarBadge.foreground#000000
  • badge.background#D8DEE9
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#1B2B3430
  • breadcrumb.focusForeground#D8DEE9
  • breadcrumb.foreground#607d8b
  • breadcrumbPicker.background#1B2B34
  • button.background#80CBC4
  • button.foreground#000000
  • button.hoverBackground#6699CC
  • debugToolBar.background#1B2B34
  • dropdown.background#273942
  • dropdown.border#273942
  • dropdown.foreground#D8DEE9
  • dropdown.listBackground#273942
  • editor.background#273942
  • editor.findMatchBackground#F9875775
  • editor.findMatchBorder#00000000
  • editor.findMatchHighlightBackground#F9AE5875
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#D8DEE9
  • editor.hoverHighlightBackground#80CBC420
  • editor.inactiveSelectionBackground#80CBC410
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#607d8b80
  • editor.selectionHighlightBackground#80CBC415
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#6699CC25
  • editor.wordHighlightBorder#00000000
  • editorBracketMatch.background#6699CC50
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#F9AE58
  • editorError.border#00000000
  • editorError.foreground#EC5f6790
  • editorGroup.border#1B2B3430
  • editorGroupHeader.noTabsBackground#1B2B34
  • editorGroupHeader.tabsBackground#1B2B34
  • editorGutter.addedBackground#99C79450
  • editorGutter.background#273942
  • editorGutter.deletedBackground#EC5f6750
  • editorGutter.modifiedBackground#6699CC50
  • editorHint.border#00000000
  • editorHint.foreground#AFBDC490
  • editorIndentGuide.activeBackground#AFBDC430
  • editorIndentGuide.background#4E5D6530
  • editorInfo.border#00000000
  • editorInfo.foreground#AFBDC490
  • editorLineNumber.activeForeground#AFBDC4
  • editorLineNumber.foreground#4E5D65
  • editorLink.activeForeground#00000000
  • editorOverviewRuler.addedForeground#99C79450
  • editorOverviewRuler.border#1B2B34
  • editorOverviewRuler.deletedForeground#EC5f6750
  • editorOverviewRuler.errorForeground#EC5f6780
  • editorOverviewRuler.modifiedForeground#6699CC50
  • editorOverviewRuler.warningForeground#FAC86350
  • editorSuggestWidget.background#1B2B34
  • editorSuggestWidget.border#1B2B3410
  • editorSuggestWidget.foreground#D8DEE9
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#00000050
  • editorUnnecessaryCode.border#607d8b
  • editorWarning.border#00000000
  • editorWarning.foreground#FAC86370
  • editorWhitespace.foreground#D8DEE935
  • editorWidget.background#1B2B34
  • editorWidget.border#1B2B34
  • editorWidget.resizeBorder#80CBC4
  • errorForeground#EC5f67
  • extensionButton.prominentBackground#000000
  • extensionButton.prominentForeground#80CBC4
  • extensionButton.prominentHoverBackground#6699CC
  • focusBorder#F7F7F700
  • foreground#D8DEE9
  • gitDecoration.addedResourceForeground#99C794
  • gitDecoration.deletedResourceForeground#EC5f67
  • gitDecoration.modifiedResourceForeground#6699CC
  • gitDecoration.untrackedResourceForeground#FAC863
  • input.background#1B2B34
  • input.border#273942
  • input.foreground#F7F7F7
  • input.placeholderForeground#607d8b
  • list.activeSelectionBackground#607d8b50
  • list.activeSelectionForeground#80CBC4
  • list.dropBackground#607d8b50
  • list.focusBackground#607d8b50
  • list.hoverBackground#607d8b20
  • list.hoverForeground#D8DEE9
  • list.inactiveSelectionBackground#607d8b30
  • list.inactiveSelectionForeground#80CBC4
  • menu.background#1B2B34
  • menu.foreground#D8DEE9
  • menu.selectionBackground#607d8b50
  • menu.selectionForeground#F7F7F7
  • notification.background#273942
  • notification.foreground#D8DEE9
  • panel.background#1B2B34
  • panel.border#80CBC430
  • panel.dropBackground#1B2B3470
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#F7F7F7
  • panelTitle.inactiveForeground#607d8b
  • progressBar.background#80CBC4
  • scrollbar.shadow#1B2B3470
  • settings.checkboxBackground#1B2B34
  • settings.checkboxBorder#1B2B34
  • settings.checkboxForeground#F7F7F7
  • settings.dropdownBackground#1B2B34
  • settings.dropdownBorder#1B2B34
  • settings.dropdownForeground#D8DEE9
  • settings.dropdownListBorder#1B2B34
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#5FB3B3
  • settings.numberInputBackground#1B2B34
  • settings.numberInputBorder#1B2B34
  • settings.numberInputForeground#FAC863
  • settings.textInputBackground#1B2B34
  • settings.textInputBorder#1B2B34
  • settings.textInputForeground#99C794
  • sideBar.background#1B2B34
  • sideBar.border#80CBC430
  • sideBar.dropBackground#1B2B3430
  • sideBar.foreground#607d8b
  • sideBarSectionHeader.background#1B2B34
  • sideBarSectionHeader.border#80CBC430
  • sideBarSectionHeader.foreground#D8DEE9
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#1B2B34
  • statusBar.border#80CBC430
  • statusBar.debuggingBackground#80CBC4
  • statusBar.debuggingBorder#80CBC4
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#607d8b
  • statusBar.noFolderBackground#1B2B34
  • statusBar.noFolderBorder#1B2B34
  • statusBar.noFolderForeground#607d8b
  • statusBarItem.activeBackground#273942
  • statusBarItem.hoverBackground#607d8b20
  • statusBarItem.prominentBackground#80CBC4
  • statusBarItem.prominentForeground#000000
  • statusBarItem.prominentHoverBackground#6699CC
  • tab.activeBackground#273942
  • tab.activeBorder#80CBC4
  • tab.activeForeground#F7F7F7
  • tab.activeModifiedBorder#607d8b
  • tab.border#1B2B34
  • tab.hoverBackground#273942
  • tab.inactiveBackground#1B2B34
  • tab.inactiveForeground#607d8b
  • tab.unfocusedActiveBorder#607d8b
  • tab.unfocusedActiveForeground#D8DEE9
  • terminal.ansiBlack#4E5D65
  • terminal.ansiBlue#6699CC
  • terminal.ansiBrightBlack#4E5D65
  • terminal.ansiBrightBlue#42A5F5
  • terminal.ansiBrightCyan#00ACA2
  • terminal.ansiBrightGreen#CDDC39
  • terminal.ansiBrightMagenta#D81B60
  • terminal.ansiBrightRed#EC5f67
  • terminal.ansiBrightWhite#D8DEE9
  • terminal.ansiBrightYellow#FFC135
  • terminal.ansiCyan#5FB3B3
  • terminal.ansiGreen#99C794
  • terminal.ansiMagenta#C695C6
  • terminal.ansiRed#EC5f67
  • terminal.ansiWhite#D8DEE9
  • terminal.ansiYellow#FAC863
  • terminal.background#1B2B34
  • terminal.border#80CBC430
  • terminal.foreground#D8DEE9
  • terminal.selectionBackground#607d8b50
  • terminalCursor.foreground#F9AE58
  • textBlockQuote.background#1B2B34
  • textBlockQuote.border#1B2B34
  • textCodeBlock.background#273942
  • textLink.activeForeground#D8DEE9
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#1B2B34
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#1B2B3400
  • titleBar.inactiveBackground#263238
  • titleBar.inactiveForeground#607d8b
  • walkThrough.embeddedEditorBackground#273942
  • welcomePage.background#273942
  • welcomePage.buttonBackground#1B2B34
  • welcomePage.buttonHoverBackground#607d8b20
  • widget.shadow#1B2B3450

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#4E5D65
constant#D8DEE9
constant.numeric#FAC863
constant.character#CDDC39
constant.character.escape#C695C6
constant.language#EC5f67italic
constant.other#6699CC
entity.name#6699CC
entity.name.type#6699CCitalic
entity.name.function#5FB3B3
meta.function-call entity.name.function, meta.function-call#6699CC
meta.function-call.arguments#D8DEE9
entity.name.tag#EC5f67
entity.name.section
entity.name.type.class#F9AE58
entity.other.inherited-class#6699CCitalic
entity.other.attribute-name#C695C6
punctuation#AFBDC4
punctuation.accessor#F98757
punctuation.separator#F98757
punctuation.definition.comment#4E5D65
punctuation.definition.keyword#C695C6
punctuation.section#5FB3B3
punctuation.definition#5FB3B3
punctuation.definition.variable#D8DEE9
keyword.control#C695C6
keyword.control.import, keyword.control.export, keyword.control.from#80CBC4
keyword.operator#5FB3B3
keyword.other#EC5f67
storage.type#C695C6
storage.modifier#C695C6
string.quoted#99C794
string.quoted.triple#5FB3B3
string.unquoted.interpolated#C695C6
string.unquoted.regexp#EC5f67
string.template#C695C6
support.function#EC5f67
support.class#EC5f67italic
support.type#EC5f67italic
support.constant#EC5f67
support.variable#EC5f67
support.other#EC5f67
variable.language#EC5f67italic
variable.parameter#F9AE58
variable.other#D8DEE9
variable.other.constant.property#99C794
variable.object.property#5FB3B3
meta.object-literal.key#5FB3B3
ThemeDatabase All Themes by enes ozturk - VS Code Theme