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