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#080402
  • activityBar.border#1c120c
  • activityBar.foreground#e8a020
  • activityBar.inactiveForeground#3a1e10
  • activityBarBadge.background#b83008
  • activityBarBadge.foreground#f8e0c0
  • badge.background#b83008
  • badge.foreground#f8e0c0
  • button.background#8a2008
  • button.foreground#f8e8d0
  • button.hoverBackground#a02810
  • editor.background#0e0806
  • editor.findMatchBackground#c8380880
  • editor.findMatchHighlightBackground#c8380840
  • editor.foreground#d0a880
  • editor.inactiveSelectionBackground#6a180840
  • editor.lineHighlightBackground#1c120c
  • editor.selectionBackground#6a180880
  • editor.selectionHighlightBackground#6a180840
  • editor.wordHighlightBackground#7a200840
  • editor.wordHighlightStrongBackground#7a200860
  • editorBracketMatch.background#6a180840
  • editorBracketMatch.border#d04820
  • editorCursor.foreground#e8a020
  • editorGroupHeader.tabsBackground#0a0604
  • editorIndentGuide.activeBackground#7a3010
  • editorIndentGuide.background#1c120c
  • editorLineNumber.activeForeground#c04818
  • editorLineNumber.foreground#502818
  • editorWhitespace.foreground#1c120c
  • focusBorder#b83008
  • input.background#160e08
  • input.border#3a2010
  • input.foreground#d0a880
  • input.placeholderForeground#502818
  • list.activeSelectionBackground#1c1008
  • list.activeSelectionForeground#f0b030
  • list.highlightForeground#e8a020
  • list.hoverBackground#1c120c
  • panel.background#0a0604
  • panel.border#1c120c
  • panelTitle.activeBorder#b83008
  • panelTitle.activeForeground#e8a020
  • scrollbarSlider.activeBackground#c83808a0
  • scrollbarSlider.background#6a180860
  • scrollbarSlider.hoverBackground#9a281080
  • sideBar.background#0a0604
  • sideBar.border#1c120c
  • sideBar.foreground#a07858
  • sideBarSectionHeader.background#160e08
  • sideBarSectionHeader.foreground#c09060
  • sideBarTitle.foreground#e8a020
  • statusBar.background#8a1e08
  • statusBar.foreground#f0d0a0
  • statusBarItem.hoverBackground#a02808
  • statusBarItem.remoteBackground#601008
  • statusBarItem.remoteForeground#f0d0a0
  • tab.activeBackground#0e0806
  • tab.activeBorderTop#b83008
  • tab.activeForeground#f0b030
  • tab.border#1c120c
  • tab.inactiveBackground#0a0604
  • tab.inactiveForeground#502818
  • terminal.ansiBlue#506888
  • terminal.ansiGreen#607838
  • terminal.ansiRed#dd3308
  • terminal.ansiWhite#d0a880
  • terminal.ansiYellow#c89020
  • terminal.background#0a0604
  • terminal.foreground#d0a880
  • titleBar.activeBackground#080402
  • titleBar.activeForeground#d0a880
  • titleBar.border#1c120c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#603020italic
keyword, storage.type, storage.modifier#e04818bold
keyword.control#ff5020bold
string, string.quoted#b07848
constant.character.escape, string.regexp#d09050
constant.numeric, constant.language, constant.other#e8a020
entity.name.function, meta.function-call entity.name.function#e8c060
variable.parameter#c09848italic
variable, variable.other#c8a068
entity.name.type, entity.name.class, support.class#f0b030bold
entity.name.interface, entity.other.inherited-class#d8a020italic
variable.other.property, support.type.property-name#b89060
keyword.operator#cc4010
punctuation#7a4828
entity.name.tag#c04010
entity.other.attribute-name#d09828
invalid#ff0000underline bold