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#00ffd5
  • activityBar.background#151b28
  • activityBar.foreground#00ffd5
  • activityBarBadge.background#00ffd5
  • activityBarBadge.foreground#0b0f1a
  • badge.background#00ffd5
  • badge.foreground#0b0f1a
  • button.background#2ee6b5
  • button.foreground#c0d4e9
  • button.hoverBackground#00ffd5
  • dropdown.background#151b28
  • dropdown.border#2ee6b5
  • dropdown.foreground#c0d4e9
  • editor.background#0b0f1a
  • editor.findMatchBackground#00ffd5aa
  • editor.findMatchHighlightBackground#00ffd555
  • editor.foreground#c0d4e9
  • editor.lineHighlightBackground#151b2880
  • editor.lineHighlightBorder#151b28c0
  • editor.selectionBackground#00ffd540
  • editor.selectionHighlightBackground#00ffd522
  • editorBracketMatch.background#00ffd533
  • editorBracketMatch.border#00ffd5
  • editorCursor.foreground#00ffd5
  • editorGroupHeader.tabsBackground#0b0f1a
  • editorIndentGuide.activeBackground#151b2888
  • editorIndentGuide.background#151b2844
  • editorLineNumber.activeForeground#00ffd5
  • editorLineNumber.foreground#4a6175
  • editorWhitespace.foreground#151b28
  • focusBorder#00ffd5
  • gitDecoration.conflictingResourceForeground#ffb347
  • gitDecoration.deletedResourceForeground#ff6f61
  • gitDecoration.modifiedResourceForeground#00ffd5
  • gitDecoration.untrackedResourceForeground#7fffd4
  • input.background#151b28
  • input.border#2ee6b5
  • input.foreground#c0d4e9
  • input.placeholderForeground#4a6175
  • inputOption.activeBorder#00ffd5
  • list.activeSelectionBackground#151b28
  • list.activeSelectionForeground#00ffd5
  • list.focusBackground#151b28
  • list.highlightForeground#00ffd5
  • list.hoverBackground#151b2866
  • minimap.background#0b0f1a
  • minimapSlider.activeBackground#00ffd566
  • minimapSlider.background#00ffd522
  • minimapSlider.hoverBackground#00ffd544
  • panel.background#0b0f1a
  • panel.border#2ee6b5
  • panelTitle.activeBorder#00ffd5
  • panelTitle.activeForeground#00ffd5
  • panelTitle.inactiveForeground#4a6175
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00ffd488
  • scrollbarSlider.background#151b2844
  • scrollbarSlider.hoverBackground#151b2888
  • sideBar.background#111620
  • sideBar.foreground#c0d4e9
  • sideBarSectionHeader.background#0b0f1a
  • sideBarSectionHeader.foreground#2ee6b5
  • sideBarTitle.foreground#00ffd5
  • statusBar.background#0b0f1a
  • statusBar.debuggingBackground#7fffd4
  • statusBar.foreground#00ffd5
  • statusBar.noFolderBackground#151b28
  • statusBarItem.hoverBackground#00ffd540
  • tab.activeBackground#0b0f1a
  • tab.activeBorder#00ffd5
  • tab.activeForeground#00ffd5
  • tab.border#0b0f1a
  • tab.inactiveBackground#111620
  • tab.inactiveForeground#4a6175
  • terminal.ansiBlue#2ee6b5
  • terminal.ansiBrightBlue#3a7bd5
  • terminal.ansiBrightCyan#40e0d0
  • terminal.ansiBrightGreen#66ffcc
  • terminal.ansiBrightMagenta#ff99ff
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#00ffd5
  • terminal.ansiGreen#7fffd4
  • terminal.ansiMagenta#ff6f61
  • terminal.ansiRed#ff6f61
  • terminal.ansiYellow#ffb347
  • terminal.background#0b0f1a
  • terminal.foreground#c0d4e9
  • titleBar.activeBackground#151b28
  • titleBar.activeForeground#c0d4e9
  • titleBar.inactiveBackground#0b0f1a
  • titleBar.inactiveForeground#7fffd4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a6175italic
string, string.quoted, string.template#7fffd4
keyword, storage.type, storage.modifier#00ffd5bold
keyword.operator, punctuation.accessor#2ee6b5
variable, variable.other#c0d4e9
variable.parameter#2ee6b5italic
entity.name.function, support.function#00ffd5
meta.function-call#7fffd4
entity.name.class, entity.name.type.class, support.class#2ee6b5bold
entity.name.type, support.type#2ee6b5
entity.name.type.interface#00ffd5italic
constant.numeric#ff6f61
constant, constant.language, constant.character#ffb347
constant.language.boolean#00ffd5bold
variable.other.property, support.variable.property#2ee6b5
meta.object-literal.key#00ffd5
entity.name.tag, punctuation.definition.tag#2ee6b5
entity.other.attribute-name#00ffd5italic
punctuation, meta.brace#c0d4e9
string.regexp#7fffd4
constant.character.escape#00ffd5
meta.decorator, punctuation.decorator#2ee6b5
invalid, invalid.illegal#ff6f61strikethrough
markup.heading, entity.name.section#00ffd5bold
markup.bold#00ffd5bold
markup.italic#2ee6b5italic
markup.underline.link#00ffd5
markup.inline.raw, markup.fenced_code#7fffd4
support.type.property-name.json#00ffd5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00ffd5
support.type.property-name.css#2ee6b5
support.constant.property-value.css#7fffd4