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#070c10
  • activityBar.border#1a2530
  • activityBar.foreground#60a0d0
  • activityBar.inactiveForeground#3a5060
  • activityBarBadge.background#3a7ab0
  • activityBarBadge.foreground#0d1117
  • badge.background#3a7ab0
  • badge.foreground#0d1117
  • button.background#2a5a8a
  • button.foreground#e0f0ff
  • button.hoverBackground#3a6a9a
  • editor.background#0d1117
  • editor.findMatchBackground#3a6a9a80
  • editor.findMatchHighlightBackground#3a6a9a40
  • editor.foreground#b0c4d8
  • editor.inactiveSelectionBackground#2a4a6a40
  • editor.lineHighlightBackground#161d26
  • editor.selectionBackground#2a4a6a80
  • editor.selectionHighlightBackground#2a4a6a40
  • editor.wordHighlightBackground#2a4a6a40
  • editor.wordHighlightStrongBackground#2a4a6a60
  • editorBracketMatch.background#2a4a6a40
  • editorBracketMatch.border#5a8ab0
  • editorCursor.foreground#60a0d0
  • editorGroupHeader.tabsBackground#090e13
  • editorIndentGuide.activeBackground#3a5a7a
  • editorIndentGuide.background#1e2830
  • editorLineNumber.activeForeground#6a8aaa
  • editorLineNumber.foreground#3a4a5a
  • editorWhitespace.foreground#1e2830
  • focusBorder#3a7ab0
  • input.background#111820
  • input.border#2a3a4a
  • input.foreground#b0c4d8
  • input.placeholderForeground#3a5060
  • inputOption.activeBackground#1e3048
  • inputOption.activeBorder#3a7ab0
  • list.activeSelectionBackground#1e3048
  • list.activeSelectionForeground#80c0e8
  • list.focusBackground#1e3048
  • list.highlightForeground#60a0d0
  • list.hoverBackground#161d26
  • list.inactiveSelectionBackground#161d26
  • panel.background#090e13
  • panel.border#1a2530
  • panelTitle.activeBorder#3a7ab0
  • panelTitle.activeForeground#60a0d0
  • panelTitle.inactiveForeground#3a5060
  • scrollbarSlider.activeBackground#4a7ab0a0
  • scrollbarSlider.background#2a4a6a60
  • scrollbarSlider.hoverBackground#3a6a9a80
  • sideBar.background#090e13
  • sideBar.border#1a2530
  • sideBar.foreground#8aa0b8
  • sideBarSectionHeader.background#111820
  • sideBarSectionHeader.foreground#90b0c8
  • sideBarTitle.foreground#70a0c8
  • statusBar.background#1a3a5a
  • statusBar.foreground#b0c4d8
  • statusBarItem.hoverBackground#2a4a6a
  • statusBarItem.remoteBackground#0a2a4a
  • statusBarItem.remoteForeground#90c0e0
  • tab.activeBackground#0d1117
  • tab.activeBorderTop#3a7ab0
  • tab.activeForeground#80c0e8
  • tab.border#1a2530
  • tab.inactiveBackground#090e13
  • tab.inactiveForeground#4a6070
  • terminal.ansiBlue#5090cc
  • terminal.ansiCyan#40b0c0
  • terminal.ansiGreen#50a080
  • terminal.ansiMagenta#9070b0
  • terminal.ansiRed#cc4455
  • terminal.ansiWhite#b0c4d8
  • terminal.ansiYellow#aaa040
  • terminal.background#090e13
  • terminal.foreground#b0c4d8
  • titleBar.activeBackground#070c10
  • titleBar.activeForeground#b0c4d8
  • titleBar.border#1a2530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a8898italic
keyword, storage.type, storage.modifier#60b0e8bold
keyword.control#80d0ffbold
string, string.quoted#60d8d0—
constant.character.escape, string.regexp#80f0e8—
constant.numeric, constant.language, constant.other#b0a8f8—
entity.name.function, meta.function-call entity.name.function#a0d8f8—
variable.parameter#80b8d8italic
variable, variable.other#b0c8e0—
entity.name.type, entity.name.class, support.class#e8d080bold
entity.name.interface, entity.other.inherited-class#d8c060italic
variable.other.property, support.type.property-name#c8d8e8—
keyword.operator#5090c8—
punctuation#7090a8—
entity.name.tag#60a8d8—
entity.other.attribute-name#60d0c8—
invalid#ff4466underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted#80d0ffbold
meta.structure.dictionary.value.json string.quoted, string.value.json#60d8d0—
storage.modifier, keyword.other.public, keyword.other.private, keyword.other.protected, keyword.other.static#f0b060bold italic
entity.name.function, entity.name.function.ts, entity.name.function.js, meta.definition.method entity.name.function, meta.function entity.name.function#a0d8f8—