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.background#333333
  • activityBar.foreground#E6E6E6
  • activityBarBadge.background#007ACC
  • activityBarBadge.foreground#E9E9E9
  • breadcrumb.activeSelectionForeground#FFFFFFAA
  • breadcrumb.background#171717
  • breadcrumb.foreground#AFAFAF
  • breadcrumb.separatorForeground#858585
  • button.background#0E639C
  • button.border#0E639C
  • button.foreground#E9E9E9
  • button.hoverBackground#1177BB
  • debugToolBar.background#252526
  • dropdown.background#3C3C3C
  • dropdown.border#555555
  • dropdown.foreground#DCDCDC
  • editor.background#171717
  • editor.findMatchBackground#264F78
  • editor.findMatchHighlightBackground#005A9C80
  • editor.findRangeHighlightBackground#003B4F50
  • editor.foreground#E9E9E9
  • editor.lineHighlightBackground#2A2A2A
  • editor.selectionBackground#3D3D3D
  • editor.selectionForeground#E9E9E9
  • editor.selectionHighlightBackground#4E4E4E
  • editor.wordHighlightBackground#57575750
  • editor.wordHighlightStrongBackground#57575780
  • editorBracketHighlight.foreground1#D16969
  • editorBracketHighlight.foreground2#B5CEA8
  • editorBracketHighlight.foreground3#9CDCFE
  • editorBracketHighlight.foreground4#C8AA6E
  • editorBracketHighlight.foreground5#C586C0
  • editorBracketHighlight.foreground6#4EC9B0
  • editorBracketHighlight.unexpectedBracket.foreground#F44747
  • editorBracketMatch.background#515C6A
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#858585
  • editorCursor.foreground#E9E9E9
  • editorError.foreground#F44747
  • editorGroup.border#444444
  • editorGroup.dropBackground#2A2D2E88
  • editorGroup.dropIntoPromptBackground#252526
  • editorGroup.dropIntoPromptForeground#CCCCCC
  • editorGroupHeader.tabsBackground#252526
  • editorGutter.background#171717
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#333333
  • editorHoverWidget.foreground#E9E9E9
  • editorHoverWidget.highlightForeground#569CD6
  • editorIndentGuide.background#404040
  • editorInfo.foreground#3794FF
  • editorInlayHint.background#2D2D2D
  • editorInlayHint.foreground#999999
  • editorLightBulb.foreground#FFCC00
  • editorLightBulbAutoFix.foreground#00A67D
  • editorLineNumber.activeForeground#E9E9E9
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#3794FF
  • editorOverviewRuler.bracketMatchForeground#888888
  • editorOverviewRuler.errorForeground#F44747
  • editorOverviewRuler.findMatchForeground#3794FF
  • editorOverviewRuler.infoForeground#3794FF
  • editorOverviewRuler.warningForeground#FFCC00
  • editorOverviewRuler.wordHighlightForeground#57575750
  • editorOverviewRuler.wordHighlightStrongForeground#57575780
  • editorRuler.foreground#3A3D41
  • editorStickyScroll.background#171717
  • editorStickyScrollHover.background#252526
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.foreground#CCCCCC
  • editorSuggestWidget.highlightForeground#3794FF
  • editorSuggestWidget.selectedBackground#2A2D2E
  • editorSymbolHighlightBackground#3A3A3A77
  • editorUnicodeHighlight.background#3A3A3A
  • editorUnicodeHighlight.border#F4474780
  • editorWarning.foreground#FFCC00
  • editorWhitespace.background#171717
  • editorWhitespace.foreground#3A3A3A
  • editorWidget.background#252526
  • editorWidget.foreground#CCCCCC
  • focusBorder#3794FF
  • input.background#3C3C3C
  • input.border#555555
  • input.foreground#DCDCDC
  • input.placeholderForeground#999999
  • inputOption.activeBackground#094771
  • inputOption.activeBorder#007ACC
  • inputOption.activeForeground#E9E9E9
  • list.activeSelectionBackground#094771
  • list.activeSelectionForeground#E9E9E9
  • list.hoverBackground#2A2D2E
  • list.hoverForeground#E9E9E9
  • list.inactiveSelectionBackground#37373D
  • list.inactiveSelectionForeground#CCCCCC
  • minimap.background#171717
  • minimap.errorHighlight#F4474788
  • minimap.findMatchHighlight#2B88D833
  • minimap.selectionHighlight#4E4E4E88
  • minimap.warningHighlight#FFCC0088
  • notification.background#252526
  • notification.buttonBackground#0E639C
  • notification.buttonForeground#E9E9E9
  • notification.foreground#CCCCCC
  • panel.background#1E1E1E
  • panel.border#333333
  • panelTitle.activeBorder#007ACC
  • panelTitle.activeForeground#E9E9E9
  • panelTitle.hoverForeground#FFFFFF
  • panelTitle.inactiveForeground#888888
  • peekViewEditor.background#1B1D1F
  • peekViewEditor.matchHighlightBackground#264F78
  • peekViewResult.background#252526
  • peekViewResult.matchHighlightBackground#264F78
  • peekViewTitle.background#1E1E1E
  • scrollbarSlider.activeBackground#BFBFBF80
  • scrollbarSlider.background#79797933
  • scrollbarSlider.hoverBackground#646464B3
  • settings.headerForeground#E6E6E6
  • settings.modifiedItemIndicator#E9950C
  • sideBar.background#252526
  • sideBar.border#333333
  • sideBar.foreground#CCCCCC
  • statusBar.background#007ACC
  • statusBar.debuggingBackground#922626
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#E9E9E9
  • statusBar.noFolderBackground#252526
  • tab.activeBackground#171717
  • tab.activeForeground#E6E6E6
  • tab.border#171717
  • tab.hoverBackground#1E1E1E
  • tab.inactiveBackground#2D2D2D
  • tab.inactiveForeground#AAAAAA
  • tab.unfocusedActiveForeground#BBBBBB
  • tab.unfocusedHoverBackground#2D2D2D
  • tab.unfocusedInactiveForeground#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472C8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3B8EEA
  • terminal.ansiBrightCyan#29B8DB
  • terminal.ansiBrightGreen#23D18B
  • terminal.ansiBrightMagenta#D670D6
  • terminal.ansiBrightRed#F14C4C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F5F543
  • terminal.ansiCyan#11A8CD
  • terminal.ansiGreen#0DBC79
  • terminal.ansiMagenta#BC3FBC
  • terminal.ansiRed#CD3131
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E5E510
  • terminal.background#171717
  • terminal.foreground#CCCCCC
  • terminalCursor.foreground#F0F0F0
  • titleBar.activeBackground#3C3C3C
  • titleBar.activeForeground#CCCCCC
  • titleBar.border#333333
  • titleBar.inactiveBackground#2D2D2D
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean, constant.language#E9950Cbold
markup.list#D7BA7D
meta.object-literal.key#9CDCFE
entity.name.tag#569CD6
meta.function#E6E6E6
entity.name.module.ts#9CDCFE
meta.import, meta.import.ts, meta.import.js#DF3079
keyword.control.flow#F44747bold
meta.decorator punctuation, entity.name.function.decorator#E9950C
meta.enum#B5CEA8
keyword.return#DF3079
keyword.throw, keyword.exception#F44747
keyword.operator#DF3079
variable.parameter#E9E9E9
constant.other#E9950C
meta.function-call#E6E6E6
entity.name.type#569CD6
support.constant#00A67D
support.type.property-name#9CDCFE
markup.inserted#00A67Ditalic
markup.deleted#F44747italic
markup.inline.raw#D7BA7Ditalic
markup.raw#D7BA7D
markup.strikethrough#F44747strikethrough
constant.character.escape#00A67Dbold
meta.annotation#569CD6
storage.type.function.arrow#DF3079
meta.type.annotation, meta.type#9CDCFE
keyword.other.unit#E9950C
meta.return-type#9CDCFE
meta.embedded.block#E6E6E6
meta.arrow#DF3079
support.variable#D7BA7D
entity.name.module.js#9CDCFE
meta.decorator#E9950C
meta.jsx.children#00A67D
entity.other.attribute-name.jsx, meta.tag.attributes#9CDCFE
support.class.component#569CD6
comment, punctuation.definition.comment#B5B5B5italic
string, constant.other.symbol#00A67D
constant.numeric#E9950C
keyword, storage.type, storage.modifier#DF3079
entity.name.function, entity.name.class, support.function, meta.function-call#E6E6E6
variable, identifier, meta.definition.variable#E9E9E9
punctuation, meta.brace, meta.delimiter#E9E9E9
invalid#FFFFFF
markup.heading, entity.name.section#569CD6bold
markup.bold#D7BA7Dbold
markup.italic#D7BA7Ditalic
markup.underlineunderline
markup.quote#CE9178italic
entity.other.attribute-name#9CDCFE
meta.tag, punctuation.definition.tag#569CD6