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#7cfc00
  • activityBar.background#111111
  • activityBar.foreground#c0ffb3
  • activityBarBadge.background#7cfc00
  • activityBarBadge.foreground#0b0b0b
  • badge.background#7cfc00
  • badge.foreground#0b0b0b
  • button.background#003300
  • button.foreground#7cfc00
  • button.hoverBackground#004400
  • dropdown.background#111111
  • dropdown.border#004400
  • dropdown.foreground#7cfc00
  • editor.background#0b0b0b
  • editor.findMatchBackground#004400
  • editor.findMatchHighlightBackground#00440066
  • editor.foreground#c0ffb3
  • editor.lineHighlightBackground#001a00
  • editor.lineHighlightBorder#004400
  • editor.selectionBackground#003300
  • editor.selectionHighlightBackground#002200
  • editorBracketMatch.background#004400
  • editorBracketMatch.border#7cfc00
  • editorCursor.foreground#7cfc00
  • editorGroupHeader.tabsBackground#0b0b0b
  • editorIndentGuide.activeBackground#11331188
  • editorIndentGuide.background#11331144
  • editorLineNumber.activeForeground#7cfc00
  • editorLineNumber.foreground#335533
  • editorWhitespace.foreground#113311
  • focusBorder#7cfc00
  • gitDecoration.conflictingResourceForeground#ffdd33
  • gitDecoration.deletedResourceForeground#ff5555
  • gitDecoration.modifiedResourceForeground#7cfc00
  • gitDecoration.untrackedResourceForeground#b3ffab
  • input.background#111111
  • input.border#004400
  • input.foreground#7cfc00
  • input.placeholderForeground#335533
  • inputOption.activeBorder#7cfc00
  • list.activeSelectionBackground#003300
  • list.activeSelectionForeground#7cfc00
  • list.focusBackground#003300
  • list.highlightForeground#7cfc00
  • list.hoverBackground#00220066
  • minimap.background#0b0b0b
  • minimapSlider.activeBackground#7cfc066
  • minimapSlider.background#7cfc022
  • minimapSlider.hoverBackground#7cfc044
  • panel.background#0b0b0b
  • panel.border#004400
  • panelTitle.activeBorder#7cfc00
  • panelTitle.activeForeground#7cfc00
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#7cfc088
  • scrollbarSlider.background#33553344
  • scrollbarSlider.hoverBackground#33553388
  • sideBar.background#0c0c0c
  • sideBar.foreground#9bff9f
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#7cfc00
  • sideBarTitle.foreground#7cfc00
  • statusBar.background#111111
  • statusBar.debuggingBackground#004400
  • statusBar.foreground#7cfc00
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#1a1a1a
  • tab.activeBackground#111111
  • tab.activeBorder#7cfc00
  • tab.activeForeground#7cfc00
  • tab.border#0b0b0b
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#00aaff
  • terminal.ansiBrightBlue#66ccff
  • terminal.ansiBrightCyan#66ffff
  • terminal.ansiBrightGreen#b3ffab
  • terminal.ansiBrightMagenta#ff66ff
  • terminal.ansiBrightRed#ff9999
  • terminal.ansiBrightYellow#ffea66
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#7cfc00
  • terminal.ansiMagenta#ff00ff
  • terminal.ansiRed#ff5555
  • terminal.ansiYellow#ffdd33
  • terminal.background#0b0b0b
  • terminal.foreground#7cfc00
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#7cfc00
  • titleBar.inactiveBackground#0a0a0a
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555555italic
string, string.quoted, string.template#00ff00
keyword, storage.type, storage.modifier#33ff33bold
keyword.operator, punctuation.accessor#a0ffa0
variable, variable.other#a0ffa0
variable.parameter#66ff66italic
entity.name.function, support.function#66ff66
meta.function-call#a0ffa0
entity.name.class, entity.name.type.class, support.class#33ff33bold
entity.name.type, support.type#a0ffa0
entity.name.type.interface#66ff66italic
constant.numeric#00ffaa
constant, constant.language, constant.character#00ffaa
constant.language.boolean#00ffaabold
variable.other.property, support.variable.property#a0ffa0
meta.object-literal.key#66ff66
entity.name.tag, punctuation.definition.tag#33ff33
entity.other.attribute-name#66ff66italic
punctuation, meta.brace#a0ffa0
string.regexp#00ffaa
constant.character.escape#00ffaa
meta.decorator, punctuation.decorator#ffff00
invalid, invalid.illegal#ff3333strikethrough
markup.heading, entity.name.section#33ff33bold
markup.bold#00ffaabold
markup.italic#66ff66italic
markup.underline.link#00ffaa
markup.inline.raw, markup.fenced_code#00ff00
support.type.property-name.json#66ff66
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffff00
support.type.property-name.css#66ff66
support.constant.property-value.css#00ffaa