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