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.activeBorder#f2c94c
  • activityBar.background#11132b
  • activityBar.foreground#a5b4ff
  • activityBarBadge.background#f2c94c
  • activityBarBadge.foreground#0b0e21
  • badge.background#f2c94c
  • badge.foreground#0b0e21
  • button.background#264f78
  • button.foreground#d0d9ff
  • button.hoverBackground#2a4b73
  • dropdown.background#11132b
  • dropdown.border#2a2e5b
  • dropdown.foreground#d0d9ff
  • editor.background#0b0e21
  • editor.findMatchBackground#ffb86c
  • editor.findMatchHighlightBackground#ff9e64
  • editor.foreground#d0d9ff
  • editor.lineHighlightBackground#1c1f3b
  • editor.lineHighlightBorder#2a2e5b
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#2a4b73
  • editorBracketMatch.background#264f78
  • editorBracketMatch.border#f2c94c
  • editorCursor.foreground#f2c94c
  • editorGroupHeader.tabsBackground#0b0e21
  • editorIndentGuide.activeBackground#f2c94c
  • editorIndentGuide.background#2a2e5b
  • editorLineNumber.activeForeground#f2c94c
  • editorLineNumber.foreground#8089b2
  • editorWhitespace.foreground#424770
  • focusBorder#f2c94c
  • gitDecoration.conflictingResourceForeground#c297ff
  • gitDecoration.deletedResourceForeground#ff6f61
  • gitDecoration.modifiedResourceForeground#ffb86c
  • gitDecoration.untrackedResourceForeground#49c0d6
  • input.background#11132b
  • input.border#2a2e5b
  • input.foreground#d0d9ff
  • input.placeholderForeground#8089b2
  • inputOption.activeBorder#f2c94c
  • list.activeSelectionBackground#264f78
  • list.activeSelectionForeground#f2c94c
  • list.focusBackground#264f78
  • list.highlightForeground#ffb86c
  • list.hoverBackground#1c1f3b
  • minimap.background#0b0e21
  • minimapSlider.activeBackground#f2c94c
  • minimapSlider.background#2a2e5b
  • minimapSlider.hoverBackground#424770
  • panel.background#0b0e21
  • panel.border#1c1f3b
  • panelTitle.activeBorder#f2c94c
  • panelTitle.activeForeground#d0d9ff
  • panelTitle.inactiveForeground#8089b2
  • scrollbar.shadow#0b0e21
  • scrollbarSlider.activeBackground#f2c94c
  • scrollbarSlider.background#2a2e5b
  • scrollbarSlider.hoverBackground#424770
  • sideBar.background#11132b
  • sideBar.foreground#c9d1ff
  • sideBarSectionHeader.background#0b0e21
  • sideBarSectionHeader.foreground#f2c94c
  • sideBarTitle.foreground#f2c94c
  • statusBar.background#0b0e21
  • statusBar.debuggingBackground#ff6f61
  • statusBar.foreground#f2c94c
  • statusBar.noFolderBackground#11132b
  • statusBarItem.hoverBackground#1c1f3b
  • tab.activeBackground#11132b
  • tab.activeBorder#f2c94c
  • tab.activeForeground#f2c94c
  • tab.border#1c1f3b
  • tab.inactiveBackground#0b0e21
  • tab.inactiveForeground#8089b2
  • terminal.ansiBlue#3b5bdb
  • terminal.ansiBrightBlue#598bff
  • terminal.ansiBrightCyan#73e8ff
  • terminal.ansiBrightGreen#95de64
  • terminal.ansiBrightMagenta#d6b8ff
  • terminal.ansiBrightRed#ff9389
  • terminal.ansiBrightYellow#ffd666
  • terminal.ansiCyan#49c0d6
  • terminal.ansiGreen#73d13d
  • terminal.ansiMagenta#c297ff
  • terminal.ansiRed#ff6f61
  • terminal.ansiYellow#f2c94c
  • terminal.background#0b0e21
  • terminal.foreground#d0d9ff
  • titleBar.activeBackground#11132b
  • titleBar.activeForeground#d0d9ff
  • titleBar.inactiveBackground#0b0e21
  • titleBar.inactiveForeground#8089b2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6e91italic
string, string.quoted, string.template#ffb86c—
keyword, storage.type, storage.modifier#f2c94cbold
keyword.operator, punctuation.accessor#ff6f61—
variable, variable.other#d0d9ff—
variable.parameter#49c0d6italic
entity.name.function, support.function#73d13d—
meta.function-call#49c0d6—
entity.name.class, entity.name.type.class, support.class#c297ffbold
entity.name.type, support.type#ffb86c—
entity.name.type.interface#ff6f61italic
constant.numeric#ffb86c—
constant, constant.language, constant.character#ffb86c—
constant.language.boolean#f2c94cbold
variable.other.property, support.variable.property#49c0d6—
meta.object-literal.key#73d13d—
entity.name.tag, punctuation.definition.tag#ff6f61—
entity.other.attribute-name#d0d9ffitalic
punctuation, meta.brace#d0d9ff—
string.regexp#ffb86c—
constant.character.escape#ff6f61—
meta.decorator, punctuation.decorator#c297ff—
invalid, invalid.illegal#ff6f61strikethrough
markup.heading, entity.name.section#f2c94cbold
markup.bold#f2c94cbold
markup.italic#d0d9ffitalic
markup.underline.link#49c0d6—
markup.inline.raw, markup.fenced_code#73d13d—
support.type.property-name.json#c297ff—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff6f61—
support.type.property-name.css#73d13d—
support.constant.property-value.css#ffb86c—