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#00ffdd
  • activityBar.background#250a40
  • activityBar.foreground#ff77ff
  • activityBarBadge.background#ff33aa
  • activityBarBadge.foreground#ffffff
  • badge.background#ff33aa
  • badge.foreground#ffffff
  • button.background#ff33aa
  • button.foreground#ffffff
  • button.hoverBackground#ff66cc
  • dropdown.background#1a0835
  • dropdown.border#5a3c70
  • dropdown.foreground#e0dfff
  • editor.background#1b0a30
  • editor.findMatchBackground#00ffdd44
  • editor.findMatchHighlightBackground#00ffdd22
  • editor.foreground#e0dfff
  • editor.lineHighlightBackground#ff77ff15
  • editor.lineHighlightBorder#ff77ff30
  • editor.selectionBackground#ff33aa40
  • editor.selectionHighlightBackground#ff33aa25
  • editorBracketMatch.background#00ffdd33
  • editorBracketMatch.border#00ffdd
  • editorCursor.foreground#00ffdd
  • editorGroupHeader.tabsBackground#1b0a30
  • editorIndentGuide.activeBackground#5a3c7088
  • editorIndentGuide.background#5a3c7044
  • editorLineNumber.activeForeground#ff66ff
  • editorLineNumber.foreground#7a5f9e
  • editorWhitespace.foreground#5a3c70
  • focusBorder#ff66ff
  • gitDecoration.conflictingResourceForeground#ffdd44
  • gitDecoration.deletedResourceForeground#ff5577
  • gitDecoration.modifiedResourceForeground#00ffdd
  • gitDecoration.untrackedResourceForeground#00ff88
  • input.background#1a0835
  • input.border#5a3c70
  • input.foreground#e0dfff
  • input.placeholderForeground#7a5f9e
  • inputOption.activeBorder#00ffdd
  • list.activeSelectionBackground#ff33aa
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#ff33aa
  • list.highlightForeground#00ffdd
  • list.hoverBackground#ff33aa44
  • minimap.background#1b0a30
  • minimapSlider.activeBackground#ff66ff66
  • minimapSlider.background#ff66ff22
  • minimapSlider.hoverBackground#ff66ff44
  • panel.background#1b0a30
  • panel.border#ff33aa
  • panelTitle.activeBorder#00ffdd
  • panelTitle.activeForeground#00ffdd
  • panelTitle.inactiveForeground#c0b0ff
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#ff66ff88
  • scrollbarSlider.background#7a5f9e44
  • scrollbarSlider.hoverBackground#7a5f9e88
  • sideBar.background#1a0835
  • sideBar.foreground#d8c9ff
  • sideBarSectionHeader.background#250a40
  • sideBarSectionHeader.foreground#00ffdd
  • sideBarTitle.foreground#ff66ff
  • statusBar.background#ff33aa
  • statusBar.debuggingBackground#00ffdd
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#250a40
  • statusBarItem.hoverBackground#ff66cc
  • tab.activeBackground#2d0c50
  • tab.activeBorder#00ffdd
  • tab.activeForeground#ffffff
  • tab.border#1b0a30
  • tab.inactiveBackground#1a0835
  • tab.inactiveForeground#c0b0ff
  • terminal.ansiBlue#4477ff
  • terminal.ansiBrightBlue#66aaff
  • terminal.ansiBrightCyan#66ffdd
  • terminal.ansiBrightGreen#66ff88
  • terminal.ansiBrightMagenta#ff88ff
  • terminal.ansiBrightRed#ff8899
  • terminal.ansiBrightYellow#ffee66
  • terminal.ansiCyan#00ffdd
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#ff66ff
  • terminal.ansiRed#ff5577
  • terminal.ansiYellow#ffdd44
  • terminal.background#1b0a30
  • terminal.foreground#e0dfff
  • titleBar.activeBackground#250a40
  • titleBar.activeForeground#e0dfff
  • titleBar.inactiveBackground#1b0a30
  • titleBar.inactiveForeground#c0b0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a5f9eitalic
string, string.quoted, string.template#00ff88
keyword, storage.type, storage.modifier#ff66ffbold
keyword.operator, punctuation.accessor#ff88ff
variable, variable.other#e0dfff
variable.parameter#ffbb33italic
entity.name.function, support.function#00ffdd
meta.function-call#66ffdd
entity.name.class, entity.name.type.class, support.class#ffdd44bold
entity.name.type, support.type#ffdd44
entity.name.type.interface#ff88aaitalic
constant.numeric#ffbb33
constant, constant.language, constant.character#ffbb33
constant.language.boolean#ffbb33bold
variable.other.property, support.variable.property#d8c9ff
meta.object-literal.key#00ffdd
entity.name.tag, punctuation.definition.tag#ff66ff
entity.other.attribute-name#ffdd44italic
punctuation, meta.brace#cc88ff
string.regexp#ffbb33
constant.character.escape#ff33aa
meta.decorator, punctuation.decorator#ffbb33
invalid, invalid.illegal#ff0000strikethrough
markup.heading, entity.name.section#ff66ffbold
markup.bold#ffdd44bold
markup.italic#00ffdditalic
markup.underline.link#ff33aa
markup.inline.raw, markup.fenced_code#00ff88
support.type.property-name.json#ff66ff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffdd44
support.type.property-name.css#00ffdd
support.constant.property-value.css#00ff88