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#00ffcc
  • activityBar.background#120018
  • activityBar.foreground#ff00ff
  • activityBarBadge.background#ff00ff
  • activityBarBadge.foreground#1a001f
  • badge.background#ff00ff
  • badge.foreground#1a001f
  • button.background#ff00ff
  • button.foreground#1a001f
  • button.hoverBackground#ff00ffcc
  • dropdown.background#26002a
  • dropdown.border#00ffcc
  • dropdown.foreground#e0e0e0
  • editor.background#1a001f
  • editor.findMatchBackground#00ffcc99
  • editor.findMatchHighlightBackground#00ffcc22
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2b0a31
  • editor.lineHighlightBorder#00ffcc
  • editor.selectionBackground#004d44
  • editor.selectionHighlightBackground#004d4433
  • editorBracketMatch.background#00ffcc77
  • editorBracketMatch.border#ff00ff
  • editorCursor.foreground#ff00ff
  • editorGroupHeader.tabsBackground#1a001f
  • editorIndentGuide.activeBackground#00ffcc
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#ff00ff
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#ff00ff
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.modifiedResourceForeground#ff00ff
  • gitDecoration.untrackedResourceForeground#ff00ff
  • input.background#26002a
  • input.border#00ffcc
  • input.foreground#e0e0e0
  • input.placeholderForeground#555555
  • inputOption.activeBorder#ff00ff
  • list.activeSelectionBackground#004d44
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#004d44
  • list.highlightForeground#ff00ff
  • list.hoverBackground#002b2a
  • minimap.background#1a001f
  • minimapSlider.activeBackground#00ffcc
  • minimapSlider.background#004d44
  • minimapSlider.hoverBackground#006655
  • panel.background#1a001f
  • panel.border#00ffcc
  • panelTitle.activeBorder#ff00ff
  • panelTitle.activeForeground#ff00ff
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#555555cc
  • scrollbarSlider.background#55555544
  • scrollbarSlider.hoverBackground#55555588
  • sideBar.background#18001a
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#1a001f
  • sideBarSectionHeader.foreground#ff00ff
  • sideBarTitle.foreground#ff00ff
  • statusBar.background#1a001f
  • statusBar.debuggingBackground#00ffcc
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#120018
  • statusBarItem.hoverBackground#004d44
  • tab.activeBackground#1a001f
  • tab.activeBorder#ff00ff
  • tab.activeForeground#ff00ff
  • tab.border#1a001f
  • tab.inactiveBackground#120018
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#5a5aff
  • terminal.ansiBrightBlue#a0a0ff
  • terminal.ansiBrightCyan#66ffdd
  • terminal.ansiBrightGreen#66ff99
  • terminal.ansiBrightMagenta#ff80ff
  • terminal.ansiBrightRed#ff7777
  • terminal.ansiBrightYellow#ffea66
  • terminal.ansiCyan#00ffcc
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff5555
  • terminal.ansiYellow#ffdd00
  • terminal.background#1a001f
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#120018
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#1a001f
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#00ffcc
keyword, storage.type, storage.modifier#ff00ffbold
keyword.operator, punctuation.accessor#00ffcc
variable, variable.other#ffdd00
variable.parameter#00ffccitalic
entity.name.function, support.function#5a5aff
meta.function-call#5a5aff
entity.name.class, entity.name.type.class, support.class#ff00ffbold
entity.name.type, support.type#5a5aff
entity.name.type.interface#00ffccitalic
constant.numeric#ffdd00
constant, constant.language, constant.character#ffdd00
constant.language.boolean#ff00ffbold
variable.other.property, support.variable.property#ffdd00
meta.object-literal.key#5a5aff
entity.name.tag, punctuation.definition.tag#ff00ff
entity.other.attribute-name#00ffccitalic
punctuation, meta.brace#e0e0e0
string.regexp#ffdd00
constant.character.escape#00ffcc
meta.decorator, punctuation.decorator#5a5aff
invalid, invalid.illegal#ff5555strikethrough
markup.heading, entity.name.section#ff00ffbold
markup.bold#ff00ffbold
markup.italic#00ffccitalic
markup.underline.link#5a5aff
markup.inline.raw, markup.fenced_code#00ffcc
support.type.property-name.json#5a5aff
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff00ff
support.type.property-name.css#5a5aff
support.constant.property-value.css#00ffcc