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#02080e
  • activityBar.border#0c1824
  • activityBar.foreground#60d8f8
  • activityBar.inactiveForeground#183040
  • activityBarBadge.background#1070b8
  • activityBarBadge.foreground#060e18
  • badge.background#1070b8
  • badge.foreground#060e18
  • button.background#0c58a0
  • button.foreground#d0f0ff
  • button.hoverBackground#1468b0
  • editor.background#060e18
  • editor.findMatchBackground#2080c880
  • editor.findMatchHighlightBackground#2080c840
  • editor.foreground#a0c8e8
  • editor.inactiveSelectionBackground#1050a040
  • editor.lineHighlightBackground#0c1824
  • editor.selectionBackground#1050a080
  • editor.selectionHighlightBackground#1050a040
  • editor.wordHighlightBackground#1050a040
  • editor.wordHighlightStrongBackground#1050a060
  • editorBracketMatch.background#1050a040
  • editorBracketMatch.border#40a8d8
  • editorCursor.foreground#70e8ff
  • editorGroupHeader.tabsBackground#040b12
  • editorIndentGuide.activeBackground#205878
  • editorIndentGuide.background#0e1e2e
  • editorLineNumber.activeForeground#4090c0
  • editorLineNumber.foreground#1a3050
  • editorWhitespace.foreground#0e1e2e
  • focusBorder#1070b8
  • input.background#08121e
  • input.border#183848
  • input.foreground#a0c8e8
  • input.placeholderForeground#204060
  • list.activeSelectionBackground#0c1e34
  • list.activeSelectionForeground#80e8ff
  • list.highlightForeground#60d8f8
  • list.hoverBackground#0c1824
  • panel.background#040b12
  • panel.border#0c1824
  • panelTitle.activeBorder#1070b8
  • panelTitle.activeForeground#60d8f8
  • scrollbarSlider.activeBackground#30a0e0a0
  • scrollbarSlider.background#1050a060
  • scrollbarSlider.hoverBackground#2080c880
  • sideBar.background#040b12
  • sideBar.border#0c1824
  • sideBar.foreground#6898c0
  • sideBarSectionHeader.background#08121e
  • sideBarSectionHeader.foreground#80b8d8
  • sideBarTitle.foreground#60d8f8
  • statusBar.background#0a3060
  • statusBar.foreground#a0d8f8
  • statusBarItem.hoverBackground#103870
  • statusBarItem.remoteBackground#062040
  • statusBarItem.remoteForeground#70c8f0
  • tab.activeBackground#060e18
  • tab.activeBorderTop#1070b8
  • tab.activeForeground#80e8ff
  • tab.border#0c1824
  • tab.inactiveBackground#040b12
  • tab.inactiveForeground#204060
  • terminal.ansiBlue#3090e0
  • terminal.ansiCyan#40d8f8
  • terminal.ansiGreen#40c0b0
  • terminal.ansiMagenta#8070d0
  • terminal.ansiRed#cc4499
  • terminal.ansiWhite#a0c8e8
  • terminal.ansiYellow#80a8c8
  • terminal.background#040b12
  • terminal.foreground#a0c8e8
  • titleBar.activeBackground#02080e
  • titleBar.activeForeground#a0c8e8
  • titleBar.border#0c1824

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5080a8italic
keyword, storage.type, storage.modifier#40d8f8bold
keyword.control#60f8ffbold
string, string.quoted#60a8e0—
constant.character.escape, string.regexp#80c8f8—
constant.numeric, constant.language, constant.other#c8b8ff—
entity.name.function, meta.function-call entity.name.function#a0e8ff—
variable.parameter#80c0e0italic
variable, variable.other#b0d0e8—
entity.name.type, entity.name.class, support.class#e0f8ffbold
entity.name.interface, entity.other.inherited-class#c0f0ffitalic
variable.other.property, support.type.property-name#c8e0f0—
keyword.operator#2898d8—
punctuation#6090b0—
entity.name.tag#4098d8—
entity.other.attribute-name#60c8e8—
invalid#ff44aaunderline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#60f8ffbold
meta.structure.dictionary.value.json string.quoted, string.value.json#70a8e8—
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#a0e8ff—