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#060704
  • activityBar.border#161810
  • activityBar.foreground#a0b840
  • activityBar.inactiveForeground#2a2c18
  • activityBarBadge.background#607830
  • activityBarBadge.foreground#0c0f08
  • badge.background#607830
  • badge.foreground#0c0f08
  • button.background#4a6028
  • button.foreground#d8d0a8
  • button.hoverBackground#5a7030
  • editor.background#0c0f08
  • editor.findMatchBackground#6a7a3080
  • editor.findMatchHighlightBackground#6a7a3040
  • editor.foreground#b0a888
  • editor.inactiveSelectionBackground#4a5a2040
  • editor.lineHighlightBackground#161810
  • editor.selectionBackground#4a5a2080
  • editor.selectionHighlightBackground#4a5a2040
  • editor.wordHighlightBackground#4a5a2040
  • editor.wordHighlightStrongBackground#4a5a2060
  • editorBracketMatch.background#4a5a2040
  • editorBracketMatch.border#7a8838
  • editorCursor.foreground#a0b840
  • editorGroupHeader.tabsBackground#090b06
  • editorIndentGuide.activeBackground#4a5030
  • editorIndentGuide.background#181a10
  • editorLineNumber.activeForeground#7a7840
  • editorLineNumber.foreground#3a3820
  • editorWhitespace.foreground#181a10
  • focusBorder#607830
  • input.background#121408
  • input.border#2a2c18
  • input.foreground#b0a888
  • input.placeholderForeground#3a3820
  • list.activeSelectionBackground#1a1e10
  • list.activeSelectionForeground#c0c858
  • list.highlightForeground#a0b840
  • list.hoverBackground#161810
  • panel.background#090b06
  • panel.border#161810
  • panelTitle.activeBorder#607830
  • panelTitle.activeForeground#a0b840
  • scrollbarSlider.activeBackground#7a8838a0
  • scrollbarSlider.background#4a5a2060
  • scrollbarSlider.hoverBackground#6a7a3080
  • sideBar.background#090b06
  • sideBar.border#161810
  • sideBar.foreground#908870
  • sideBarSectionHeader.background#121408
  • sideBarSectionHeader.foreground#a09878
  • sideBarTitle.foreground#a0b840
  • statusBar.background#3a4820
  • statusBar.foreground#c0b890
  • statusBarItem.hoverBackground#4a5828
  • statusBarItem.remoteBackground#283010
  • statusBarItem.remoteForeground#b0a870
  • tab.activeBackground#0c0f08
  • tab.activeBorderTop#607830
  • tab.activeForeground#c0c858
  • tab.border#161810
  • tab.inactiveBackground#090b06
  • tab.inactiveForeground#4a4830
  • terminal.ansiBlue#507080
  • terminal.ansiCyan#508870
  • terminal.ansiGreen#608040
  • terminal.ansiRed#aa4433
  • terminal.ansiWhite#b0a888
  • terminal.ansiYellow#a09040
  • terminal.background#090b06
  • terminal.foreground#b0a888
  • titleBar.activeBackground#060704
  • titleBar.activeForeground#b0a888
  • titleBar.border#161810

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#787858italic
keyword, storage.type, storage.modifier#b8cc48bold
keyword.control#d8e860bold
string, string.quoted#c89860—
constant.character.escape, string.regexp#e0b878—
constant.numeric, constant.language, constant.other#e8e890—
entity.name.function, meta.function-call entity.name.function#d8d080—
variable.parameter#b8a868italic
variable, variable.other#c8b888—
entity.name.type, entity.name.class, support.class#d8e060bold
entity.name.interface, entity.other.inherited-class#c8d050italic
variable.other.property, support.type.property-name#d8c8a0—
keyword.operator#a0a838—
punctuation#888858—
entity.name.tag#a8a840—
entity.other.attribute-name#d8c858—
invalid#ff4433underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#d8e860bold
meta.structure.dictionary.value.json string.quoted, string.value.json#c89860—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#a0e8d8bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#d8d080—