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#04080c
  • activityBar.border#101820
  • activityBar.foreground#50c8b0
  • activityBar.inactiveForeground#183040
  • activityBarBadge.background#186878
  • activityBarBadge.foreground#080e14
  • badge.background#186878
  • badge.foreground#080e14
  • button.background#0e5868
  • button.foreground#c8eef0
  • button.hoverBackground#186878
  • editor.background#080e14
  • editor.findMatchBackground#207a8880
  • editor.findMatchHighlightBackground#207a8840
  • editor.foreground#a8c8d8
  • editor.inactiveSelectionBackground#1a5a6840
  • editor.lineHighlightBackground#101820
  • editor.selectionBackground#1a5a6880
  • editor.selectionHighlightBackground#1a5a6840
  • editor.wordHighlightBackground#1a5a6840
  • editor.wordHighlightStrongBackground#1a5a6860
  • editorBracketMatch.background#1a5a6840
  • editorBracketMatch.border#409898
  • editorCursor.foreground#60d8c0
  • editorGroupHeader.tabsBackground#060b10
  • editorIndentGuide.activeBackground#206878
  • editorIndentGuide.background#10181e
  • editorLineNumber.activeForeground#408898
  • editorLineNumber.foreground#1e3848
  • editorWhitespace.foreground#10181e
  • focusBorder#186878
  • input.background#0c1620
  • input.border#183848
  • input.foreground#a8c8d8
  • input.placeholderForeground#204858
  • list.activeSelectionBackground#0e1e2e
  • list.activeSelectionForeground#70e8d0
  • list.highlightForeground#50c8b0
  • list.hoverBackground#101820
  • panel.background#060b10
  • panel.border#101820
  • panelTitle.activeBorder#186878
  • panelTitle.activeForeground#50c8b0
  • scrollbarSlider.activeBackground#308898a0
  • scrollbarSlider.background#1a5a6860
  • scrollbarSlider.hoverBackground#207a8880
  • sideBar.background#060b10
  • sideBar.border#101820
  • sideBar.foreground#7098a8
  • sideBarSectionHeader.background#0c1620
  • sideBarSectionHeader.foreground#88b8c8
  • sideBarTitle.foreground#50c8b0
  • statusBar.background#0e4858
  • statusBar.foreground#a0d0d8
  • statusBarItem.hoverBackground#185868
  • statusBarItem.remoteBackground#083040
  • statusBarItem.remoteForeground#80c0c8
  • tab.activeBackground#080e14
  • tab.activeBorderTop#186878
  • tab.activeForeground#70e8d0
  • tab.border#101820
  • tab.inactiveBackground#060b10
  • tab.inactiveForeground#204858
  • terminal.ansiBlue#3888c0
  • terminal.ansiCyan#40c8b8
  • terminal.ansiGreen#40b898
  • terminal.ansiMagenta#7880b8
  • terminal.ansiRed#cc4466
  • terminal.ansiWhite#a8c8d8
  • terminal.ansiYellow#88b878
  • terminal.background#060b10
  • terminal.foreground#a8c8d8
  • titleBar.activeBackground#04080c
  • titleBar.activeForeground#a8c8d8
  • titleBar.border#101820

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#508898italic
keyword, storage.type, storage.modifier#50d8c0bold
keyword.control#70f8d8bold
string, string.quoted#60b8e0—
constant.character.escape, string.regexp#80d8f8—
constant.numeric, constant.language, constant.other#a8f8e8—
entity.name.function, meta.function-call entity.name.function#90e8d8—
variable.parameter#70c0d0italic
variable, variable.other#a8d0e0—
entity.name.type, entity.name.class, support.class#80f8e0bold
entity.name.interface, entity.other.inherited-class#60e8c8italic
variable.other.property, support.type.property-name#c0e0e8—
keyword.operator#40b0c0—
punctuation#609898—
entity.name.tag#50a8c8—
entity.other.attribute-name#60d8c8—
invalid#ff4466underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#70f8d8bold
meta.structure.dictionary.value.json string.quoted, string.value.json#70b8e0—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f8e898bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#90e8d8—