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#ffb86c
  • activityBar.background#0f1a2b
  • activityBar.foreground#8fd3c1
  • activityBarBadge.background#ffb86c
  • activityBarBadge.foreground#0b111c
  • badge.background#ffb86c
  • badge.foreground#0b111c
  • button.background#5fa8d3
  • button.foreground#0b111c
  • button.hoverBackground#5fa8d380
  • dropdown.background#101820
  • dropdown.border#3a4b5c
  • dropdown.foreground#cfd8dc
  • editor.background#0b111c
  • editor.findMatchBackground#ffb86c30
  • editor.findMatchHighlightBackground#ffb86c15
  • editor.foreground#cfd8dc
  • editor.lineHighlightBackground#ffb86c20
  • editor.lineHighlightBorder#ffb86c40
  • editor.selectionBackground#8fd3c140
  • editor.selectionHighlightBackground#8fd3c120
  • editorBracketMatch.background#ffb86c33
  • editorBracketMatch.border#ffb86c
  • editorCursor.foreground#ffb86c
  • editorGroupHeader.tabsBackground#0b111c
  • editorIndentGuide.activeBackground#3a4b5c88
  • editorIndentGuide.background#3a4b5c44
  • editorLineNumber.activeForeground#ffb86c
  • editorLineNumber.foreground#4b525c
  • editorWhitespace.foreground#4b525c
  • focusBorder#ffb86c
  • gitDecoration.conflictingResourceForeground#ff6b6b
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.modifiedResourceForeground#5fa8d3
  • gitDecoration.untrackedResourceForeground#8fd3c1
  • input.background#101820
  • input.border#3a4b5c
  • input.foreground#cfd8dc
  • input.placeholderForeground#4b525c
  • inputOption.activeBorder#ffb86c
  • list.activeSelectionBackground#8fd3c140
  • list.activeSelectionForeground#cfd8dc
  • list.focusBackground#8fd3c140
  • list.highlightForeground#ffb86c
  • list.hoverBackground#8fd3c120
  • minimap.background#0b111c
  • minimapSlider.activeBackground#5fa8d160
  • minimapSlider.background#5fa8d120
  • minimapSlider.hoverBackground#5fa8d140
  • panel.background#0b111c
  • panel.border#101820
  • panelTitle.activeBorder#ffb86c
  • panelTitle.activeForeground#cfd8dc
  • panelTitle.inactiveForeground#7a8690
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ffb86c88
  • scrollbarSlider.background#4b525c44
  • scrollbarSlider.hoverBackground#4b525c88
  • sideBar.background#101820
  • sideBar.foreground#cfd8dc
  • sideBarSectionHeader.background#0f1a2b
  • sideBarSectionHeader.foreground#8fd3c1
  • sideBarTitle.foreground#ffb86c
  • statusBar.background#101820
  • statusBar.debuggingBackground#ffb86c
  • statusBar.foreground#cfd8dc
  • statusBar.noFolderBackground#101820
  • statusBarItem.hoverBackground#ffb86c40
  • tab.activeBackground#0b111c
  • tab.activeBorder#ffb86c
  • tab.activeForeground#cfd8dc
  • tab.border#0b111c
  • tab.inactiveBackground#101820
  • tab.inactiveForeground#7a8690
  • terminal.ansiBlue#5fa8d3
  • terminal.ansiBrightBlue#5fa8d3
  • terminal.ansiBrightCyan#8fd3c1
  • terminal.ansiBrightGreen#8fd3c1
  • terminal.ansiBrightMagenta#ffb86c
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#ffb86c
  • terminal.ansiCyan#8fd3c1
  • terminal.ansiGreen#8fd3c1
  • terminal.ansiMagenta#ffb86c
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#ffb86c
  • terminal.background#0b111c
  • terminal.foreground#cfd8dc
  • titleBar.activeBackground#0f1a2b
  • titleBar.activeForeground#cfd8dc
  • titleBar.inactiveBackground#0b111c
  • titleBar.inactiveForeground#7a8690

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4b525citalic
string, string.quoted, string.template#8fd3c1
keyword, storage.type, storage.modifier#ffb86cbold
keyword.operator, punctuation.accessor#5fa8d3
variable, variable.other#cfd8dc
variable.parameter#5fa8d3italic
entity.name.function, support.function#5fa8d3
meta.function-call#ffb86c
entity.name.class, entity.name.type.class, support.class#5fa8d3bold
entity.name.type, support.type#5fa8d3
entity.name.type.interface#5fa8d3italic
constant.numeric#ffb86c
constant, constant.language, constant.character#8fd3c1
constant.language.boolean#ffb86cbold
variable.other.property, support.variable.property#5fa8d3
meta.object-literal.key#5fa8d3
entity.name.tag, punctuation.definition.tag#ffb86c
entity.other.attribute-name#5fa8d3italic
punctuation, meta.brace#cfd8dc
string.regexp#8fd3c1
constant.character.escape#ffb86c
meta.decorator, punctuation.decorator#ffb86c
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#ffb86cbold
markup.bold#ffb86cbold
markup.italic#5fa8d3italic
markup.underline.link#5fa8d3
markup.inline.raw, markup.fenced_code#8fd3c1
support.type.property-name.json#5fa8d3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb86c
support.type.property-name.css#5fa8d3
support.constant.property-value.css#8fd3c1
themesmith by CyberBoost - VS Code Theme