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#050a05
  • activityBar.border#121c12
  • activityBar.foreground#60c840
  • activityBar.inactiveForeground#2a4020
  • activityBarBadge.background#3a7820
  • activityBarBadge.foreground#0a120a
  • badge.background#3a7820
  • badge.foreground#0a120a
  • button.background#2a6818
  • button.foreground#c8f0c0
  • button.hoverBackground#387828
  • editor.background#0a120a
  • editor.findMatchBackground#4a7a2080
  • editor.findMatchHighlightBackground#4a7a2040
  • editor.foreground#9ac890
  • editor.inactiveSelectionBackground#2a5a1840
  • editor.lineHighlightBackground#121c12
  • editor.selectionBackground#2a5a1880
  • editor.selectionHighlightBackground#2a5a1840
  • editor.wordHighlightBackground#2a5a1840
  • editor.wordHighlightStrongBackground#2a5a1860
  • editorBracketMatch.background#2a5a1840
  • editorBracketMatch.border#50a030
  • editorCursor.foreground#60c840
  • editorGroupHeader.tabsBackground#070d07
  • editorIndentGuide.activeBackground#305820
  • editorIndentGuide.background#121c12
  • editorLineNumber.activeForeground#508040
  • editorLineNumber.foreground#2a4020
  • editorWhitespace.foreground#121c12
  • focusBorder#3a7820
  • input.background#0d170d
  • input.border#1c3018
  • input.foreground#9ac890
  • input.placeholderForeground#2a4020
  • inputOption.activeBackground#162416
  • inputOption.activeBorder#3a7820
  • list.activeSelectionBackground#162416
  • list.activeSelectionForeground#70e040
  • list.focusBackground#162416
  • list.highlightForeground#60c840
  • list.hoverBackground#121c12
  • list.inactiveSelectionBackground#121c12
  • panel.background#070d07
  • panel.border#121c12
  • panelTitle.activeBorder#3a7820
  • panelTitle.activeForeground#60c840
  • panelTitle.inactiveForeground#2a4020
  • scrollbarSlider.activeBackground#5a8a30a0
  • scrollbarSlider.background#2a5a1860
  • scrollbarSlider.hoverBackground#4a7a2080
  • sideBar.background#070d07
  • sideBar.border#121c12
  • sideBar.foreground#709870
  • sideBarSectionHeader.background#0d170d
  • sideBarSectionHeader.foreground#80a878
  • sideBarTitle.foreground#60c840
  • statusBar.background#224a12
  • statusBar.foreground#9ac890
  • statusBarItem.hoverBackground#2c5a18
  • statusBarItem.remoteBackground#143008
  • statusBarItem.remoteForeground#70c060
  • tab.activeBackground#0a120a
  • tab.activeBorderTop#3a7820
  • tab.activeForeground#70e040
  • tab.border#121c12
  • tab.inactiveBackground#070d07
  • tab.inactiveForeground#2a4820
  • terminal.ansiBlue#408080
  • terminal.ansiCyan#409870
  • terminal.ansiGreen#50a840
  • terminal.ansiMagenta#708050
  • terminal.ansiRed#aa4444
  • terminal.ansiWhite#9ac890
  • terminal.ansiYellow#98a040
  • terminal.background#070d07
  • terminal.foreground#9ac890
  • titleBar.activeBackground#050a05
  • titleBar.activeForeground#9ac890
  • titleBar.border#121c12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8858italic
keyword, storage.type, storage.modifier#78d858bold
keyword.control#98f870bold
string, string.quoted#c8c860—
constant.character.escape, string.regexp#e0e078—
constant.numeric, constant.language, constant.other#b8f098—
entity.name.function, meta.function-call entity.name.function#a8e890—
variable.parameter#88c870italic
variable, variable.other#a8d898—
entity.name.type, entity.name.class, support.class#80e860bold
entity.name.interface, entity.other.inherited-class#70d850italic
variable.other.property, support.type.property-name#c8e8b8—
keyword.operator#60b848—
punctuation#7aa868—
entity.name.tag#70b858—
entity.other.attribute-name#c8c858—
invalid#ff4444underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#98f870bold
meta.structure.dictionary.value.json string.quoted, string.value.json#c8c860—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f8e078bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#a8e890—