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#0a0904
  • activityBar.border#1c1a10
  • activityBar.foreground#c8a860
  • activityBar.inactiveForeground#302c18
  • activityBarBadge.background#7a6030
  • activityBarBadge.foreground#111008
  • badge.background#7a6030
  • badge.foreground#111008
  • button.background#5a4820
  • button.foreground#e8d8a8
  • button.hoverBackground#6a5828
  • editor.background#111008
  • editor.findMatchBackground#7a682080
  • editor.findMatchHighlightBackground#7a682040
  • editor.foreground#c8b898
  • editor.inactiveSelectionBackground#5a501840
  • editor.lineHighlightBackground#1c1a10
  • editor.selectionBackground#5a501880
  • editor.selectionHighlightBackground#5a501840
  • editor.wordHighlightBackground#5a501840
  • editor.wordHighlightStrongBackground#5a501860
  • editorBracketMatch.background#5a501840
  • editorBracketMatch.border#a08850
  • editorCursor.foreground#d8b870
  • editorGroupHeader.tabsBackground#0d0c06
  • editorIndentGuide.activeBackground#5a4828
  • editorIndentGuide.background#1c1a10
  • editorLineNumber.activeForeground#907850
  • editorLineNumber.foreground#403820
  • editorWhitespace.foreground#1c1a10
  • focusBorder#7a6030
  • input.background#181508
  • input.border#302c18
  • input.foreground#c8b898
  • input.placeholderForeground#4a4028
  • list.activeSelectionBackground#201e0e
  • list.activeSelectionForeground#e0c880
  • list.highlightForeground#c8a860
  • list.hoverBackground#1c1a10
  • panel.background#0d0c06
  • panel.border#1c1a10
  • panelTitle.activeBorder#7a6030
  • panelTitle.activeForeground#c8a860
  • scrollbarSlider.activeBackground#9a8050a0
  • scrollbarSlider.background#5a501860
  • scrollbarSlider.hoverBackground#7a682080
  • sideBar.background#0d0c06
  • sideBar.border#1c1a10
  • sideBar.foreground#9a8870
  • sideBarSectionHeader.background#181508
  • sideBarSectionHeader.foreground#b09878
  • sideBarTitle.foreground#c8a860
  • statusBar.background#3a3018
  • statusBar.foreground#d0c090
  • statusBarItem.hoverBackground#4a3820
  • statusBarItem.remoteBackground#282010
  • statusBarItem.remoteForeground#c0a870
  • tab.activeBackground#111008
  • tab.activeBorderTop#7a6030
  • tab.activeForeground#e0c880
  • tab.border#1c1a10
  • tab.inactiveBackground#0d0c06
  • tab.inactiveForeground#4a4028
  • terminal.ansiBlue#607888
  • terminal.ansiCyan#708878
  • terminal.ansiGreen#708040
  • terminal.ansiRed#aa3322
  • terminal.ansiWhite#c8b898
  • terminal.ansiYellow#c0982a
  • terminal.background#0d0c06
  • terminal.foreground#c8b898
  • titleBar.activeBackground#0a0904
  • titleBar.activeForeground#c8b898
  • titleBar.border#1c1a10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#907858italic
keyword, storage.type, storage.modifier#e8c060bold
keyword.control#f8d878bold
string, string.quoted#d0a070—
constant.character.escape, string.regexp#e8c090—
constant.numeric, constant.language, constant.other#f8f0b0—
entity.name.function, meta.function-call entity.name.function#f0d890—
variable.parameter#c8b070italic
variable, variable.other#d8c090—
entity.name.type, entity.name.class, support.class#f8e070bold
entity.name.interface, entity.other.inherited-class#e8d060italic
variable.other.property, support.type.property-name#e0d0a8—
keyword.operator#c0a040—
punctuation#a89060—
entity.name.tag#c0a840—
entity.other.attribute-name#e0c860—
invalid#ff4422underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#f8d878bold
meta.structure.dictionary.value.json string.quoted, string.value.json#d0a070—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#90d8f0bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#f0d890—