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#00e5ff
  • activityBar.background#0a0015
  • activityBar.foreground#00e5ff
  • activityBarBadge.background#ffb400
  • activityBarBadge.foreground#0b001f
  • badge.background#ffb400
  • badge.foreground#0b001f
  • button.background#1a0033
  • button.foreground#ffffff
  • button.hoverBackground#2a0040
  • dropdown.background#0a0015
  • dropdown.border#1a0033
  • dropdown.foreground#e0e0e0
  • editor.background#0b001f
  • editor.findMatchBackground#ffb40044
  • editor.findMatchHighlightBackground#ffb40022
  • editor.foreground#d0d0d0
  • editor.lineHighlightBackground#1a003340
  • editor.lineHighlightBorder#1a003380
  • editor.selectionBackground#00e5ff55
  • editor.selectionHighlightBackground#00e5ff33
  • editorBracketMatch.background#ffb40033
  • editorBracketMatch.border#ffb400
  • editorCursor.foreground#ffb400
  • editorGroupHeader.tabsBackground#0b001f
  • editorIndentGuide.activeBackground#3a003088
  • editorIndentGuide.background#3a003044
  • editorLineNumber.activeForeground#ffb400
  • editorLineNumber.foreground#4a0030
  • editorWhitespace.foreground#3a0030
  • focusBorder#ffb400
  • gitDecoration.conflictingResourceForeground#ffb400
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.modifiedResourceForeground#00e5ff
  • gitDecoration.untrackedResourceForeground#7cfc00
  • input.background#0a0015
  • input.border#1a0033
  • input.foreground#e0e0e0
  • input.placeholderForeground#4a0030
  • inputOption.activeBorder#ffb400
  • list.activeSelectionBackground#1a0033
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#1a0033
  • list.highlightForeground#ffb400
  • list.hoverBackground#1a003366
  • minimap.background#0b001f
  • minimapSlider.activeBackground#ffb40066
  • minimapSlider.background#ffb40022
  • minimapSlider.hoverBackground#ffb40044
  • panel.background#0b001f
  • panel.border#1a0033
  • panelTitle.activeBorder#ffb400
  • panelTitle.activeForeground#ffb400
  • panelTitle.inactiveForeground#a0a0a0
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ffb40088
  • scrollbarSlider.background#4a003044
  • scrollbarSlider.hoverBackground#4a003088
  • sideBar.background#0c001a
  • sideBar.foreground#a0a0a0
  • sideBarSectionHeader.background#0a0015
  • sideBarSectionHeader.foreground#00e5ff
  • sideBarTitle.foreground#00e5ff
  • statusBar.background#150020
  • statusBar.debuggingBackground#ff6f61
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#0a0015
  • statusBarItem.hoverBackground#2a001e
  • tab.activeBackground#150020
  • tab.activeBorder#00e5ff
  • tab.activeForeground#ffffff
  • tab.border#0b001f
  • tab.inactiveBackground#0c001a
  • tab.inactiveForeground#a0a0a0
  • terminal.ansiBlue#00bfff
  • terminal.ansiBrightBlue#5ab3ff
  • terminal.ansiBrightCyan#33ffd6
  • terminal.ansiBrightGreen#9aff5b
  • terminal.ansiBrightMagenta#ff8a80
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightYellow#ffe066
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#7cfc00
  • terminal.ansiMagenta#ff6f61
  • terminal.ansiRed#ff5555
  • terminal.ansiYellow#ffb400
  • terminal.background#0b001f
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#0a0015
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#0b001f
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5d5d7aitalic
string, string.quoted, string.template#7cfc00
keyword, storage.type, storage.modifier#ff6f61bold
keyword.operator, punctuation.accessor#ff8a80
variable, variable.other#e0e0e0
variable.parameter#ffb400italic
entity.name.function, support.function#00e5ff
meta.function-call#ffb400
entity.name.class, entity.name.type.class, support.class#ff6f61bold
entity.name.type, support.type#00e5ff
entity.name.type.interface#00e5ffitalic
constant.numeric#ffb400
constant, constant.language, constant.character#ffb400
constant.language.boolean#ffb400bold
variable.other.property, support.variable.property#ffb400
meta.object-literal.key#00e5ff
entity.name.tag, punctuation.definition.tag#ff6f61
entity.other.attribute-name#00e5ffitalic
punctuation, meta.brace#ff8a80
string.regexp#ff5555
constant.character.escape#00e5ff
meta.decorator, punctuation.decorator#ffb400
invalid, invalid.illegal#ff5555strikethrough
markup.heading, entity.name.section#ff6f61bold
markup.bold#ffb400bold
markup.italic#00e5ffitalic
markup.underline.link#7cfc00
markup.inline.raw, markup.fenced_code#7cfc00
support.type.property-name.json#00e5ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffb400
support.type.property-name.css#00e5ff
support.constant.property-value.css#7cfc00