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#ff006e
  • activityBar.background#12002b
  • activityBar.foreground#ff006e
  • activityBarBadge.background#ff006e
  • activityBarBadge.foreground#0b001f
  • badge.background#ff006e
  • badge.foreground#0b001f
  • button.background#ff006e
  • button.foreground#0b001f
  • button.hoverBackground#ff3385
  • dropdown.background#150032
  • dropdown.border#333333
  • dropdown.foreground#d8d8d8
  • editor.background#0b001f
  • editor.findMatchBackground#ff006e44
  • editor.findMatchHighlightBackground#ff006e22
  • editor.foreground#d8d8d8
  • editor.lineHighlightBackground#33225555
  • editor.lineHighlightBorder#332255aa
  • editor.selectionBackground#0044ff44
  • editor.selectionHighlightBackground#0044ff22
  • editorBracketMatch.background#0044ff22
  • editorBracketMatch.border#ff006e
  • editorCursor.foreground#ff006e
  • editorGroupHeader.tabsBackground#0c001e
  • editorIndentGuide.activeBackground#77777788
  • editorIndentGuide.background#55555544
  • editorLineNumber.activeForeground#ff006e
  • editorLineNumber.foreground#555555
  • editorWhitespace.foreground#555555
  • focusBorder#ff006e
  • gitDecoration.conflictingResourceForeground#ffdf00
  • gitDecoration.deletedResourceForeground#ff4d4d
  • gitDecoration.modifiedResourceForeground#ff006e
  • gitDecoration.untrackedResourceForeground#00ff80
  • input.background#150032
  • input.border#333333
  • input.foreground#d8d8d8
  • input.placeholderForeground#777777
  • inputOption.activeBorder#ff006e
  • list.activeSelectionBackground#0044ff44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0044ff44
  • list.highlightForeground#ff006e
  • list.hoverBackground#44444466
  • minimap.background#0c001e
  • minimapSlider.activeBackground#ff006e88
  • minimapSlider.background#ff006e22
  • minimapSlider.hoverBackground#ff006e44
  • panel.background#12002b
  • panel.border#150032
  • panelTitle.activeBorder#ff006e
  • panelTitle.activeForeground#ff006e
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff006e88
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#12002b
  • sideBar.foreground#d8d8d8
  • sideBarSectionHeader.background#140030
  • sideBarSectionHeader.foreground#ff006e
  • sideBarTitle.foreground#ff006e
  • statusBar.background#150032
  • statusBar.debuggingBackground#ff6600
  • statusBar.foreground#d8d8d8
  • statusBar.noFolderBackground#12002b
  • statusBarItem.hoverBackground#33001a
  • tab.activeBackground#0b001f
  • tab.activeBorder#ff006e
  • tab.activeForeground#ff006e
  • tab.border#0b001f
  • tab.inactiveBackground#1a0033
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#6a5eff
  • terminal.ansiBrightBlue#9f88ff
  • terminal.ansiBrightCyan#66ffe5
  • terminal.ansiBrightGreen#66ffb3
  • terminal.ansiBrightMagenta#ff80e5
  • terminal.ansiBrightRed#ff9999
  • terminal.ansiBrightYellow#fff280
  • terminal.ansiCyan#00d4ff
  • terminal.ansiGreen#00ff80
  • terminal.ansiMagenta#ff00c8
  • terminal.ansiRed#ff4d4d
  • terminal.ansiYellow#ffdf00
  • terminal.background#0b001f
  • terminal.foreground#d8d8d8
  • titleBar.activeBackground#150032
  • titleBar.activeForeground#d8d8d8
  • titleBar.inactiveBackground#150032
  • titleBar.inactiveForeground#a0a0a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555f71italic
string, string.quoted, string.template#00ffea—
keyword, storage.type, storage.modifier#ff006ebold
keyword.operator, punctuation.accessor#ff8c00—
variable, variable.other#d8d8d8—
variable.parameter#ff8c00italic
entity.name.function, support.function#ff8c00—
meta.function-call#ff8c00—
entity.name.class, entity.name.type.class, support.class#ffb3ffbold
entity.name.type, support.type#ffb3ff—
entity.name.type.interface#ffb3ffitalic
constant.numeric#ffdf00—
constant, constant.language, constant.character#ff6600—
constant.language.boolean#ff6600bold
variable.other.property, support.variable.property#ffb3ff—
meta.object-literal.key#ffb3ff—
entity.name.tag, punctuation.definition.tag#ff8c00—
entity.other.attribute-name#ff8c00italic
punctuation, meta.brace#ff8c00—
string.regexp#ffdf00—
constant.character.escape#ff8c00—
meta.decorator, punctuation.decorator#ffdf00—
invalid, invalid.illegal#ff4d4dstrikethrough
markup.heading, entity.name.section#ff006ebold
markup.bold#ff006ebold
markup.italic#ff8c00italic
markup.underline.link#00d4ff—
markup.inline.raw, markup.fenced_code#00ff80—
support.type.property-name.json#ff8c00—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff006e—
support.type.property-name.css#ff8c00—
support.constant.property-value.css#00ff80—