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#00ffab
  • activityBar.background#002d27
  • activityBar.foreground#00ffab
  • activityBarBadge.background#00ffab
  • activityBarBadge.foreground#001714
  • badge.background#00ffab
  • badge.foreground#001714
  • button.background#009977
  • button.foreground#ffffff
  • button.hoverBackground#008866
  • dropdown.background#002b20
  • dropdown.border#009977
  • dropdown.foreground#e0f5e0
  • editor.background#001714
  • editor.findMatchBackground#00ffab44
  • editor.findMatchHighlightBackground#00ffab22
  • editor.foreground#e0f5e0
  • editor.lineHighlightBackground#00997740
  • editor.lineHighlightBorder#00997780
  • editor.selectionBackground#00ffab55
  • editor.selectionHighlightBackground#00ffab33
  • editorBracketMatch.background#00ffab33
  • editorBracketMatch.border#00ffab
  • editorCursor.foreground#00ffab
  • editorGroupHeader.tabsBackground#001714
  • editorIndentGuide.activeBackground#2b5c4a88
  • editorIndentGuide.background#2b5c4a44
  • editorLineNumber.activeForeground#00ffab
  • editorLineNumber.foreground#4a946a
  • editorWhitespace.foreground#2b5c4a
  • focusBorder#00ffab
  • gitDecoration.conflictingResourceForeground#ffe66b
  • gitDecoration.deletedResourceForeground#ff6b6b
  • gitDecoration.modifiedResourceForeground#00ffab
  • gitDecoration.untrackedResourceForeground#66aaff
  • input.background#002b20
  • input.border#009977
  • input.foreground#e0f5e0
  • input.placeholderForeground#4a946a
  • inputOption.activeBorder#00ffab
  • list.activeSelectionBackground#009977
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#009977
  • list.highlightForeground#00ffab
  • list.hoverBackground#00997766
  • minimap.background#001714
  • minimapSlider.activeBackground#00ffab66
  • minimapSlider.background#00ffab22
  • minimapSlider.hoverBackground#00ffab44
  • panel.background#001714
  • panel.border#009977
  • panelTitle.activeBorder#00ffab
  • panelTitle.activeForeground#00ffab
  • panelTitle.inactiveForeground#c8ffd5
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#00ffab88
  • scrollbarSlider.background#4a946a44
  • scrollbarSlider.hoverBackground#4a946a88
  • sideBar.background#002b20
  • sideBar.foreground#c8ffd5
  • sideBarSectionHeader.background#002d27
  • sideBarSectionHeader.foreground#66ffcc
  • sideBarTitle.foreground#66ffcc
  • statusBar.background#009977
  • statusBar.debuggingBackground#00ffab
  • statusBar.foreground#e0f5e0
  • statusBar.noFolderBackground#002d27
  • statusBarItem.hoverBackground#008866
  • tab.activeBackground#009977
  • tab.activeBorder#00ffab
  • tab.activeForeground#ffffff
  • tab.border#001714
  • tab.inactiveBackground#002b20
  • tab.inactiveForeground#c8ffd5
  • terminal.ansiBlue#66aaff
  • terminal.ansiBrightBlue#99ccff
  • terminal.ansiBrightCyan#9ef8f3
  • terminal.ansiBrightGreen#8bffbb
  • terminal.ansiBrightMagenta#ffafe8
  • terminal.ansiBrightRed#ff8b8b
  • terminal.ansiBrightYellow#fff68b
  • terminal.ansiCyan#5effd1
  • terminal.ansiGreen#00ffab
  • terminal.ansiMagenta#ff8fc8
  • terminal.ansiRed#ff6b6b
  • terminal.ansiYellow#ffe66b
  • terminal.background#001714
  • terminal.foreground#e0f5e0
  • titleBar.activeBackground#002d27
  • titleBar.activeForeground#e0f5e0
  • titleBar.inactiveBackground#001714
  • titleBar.inactiveForeground#c8ffd5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2b5c4aitalic
string, string.quoted, string.template#b7ff6a—
keyword, storage.type, storage.modifier#00ffabbold
keyword.operator, punctuation.accessor#5effd1—
variable, variable.other#caffd0—
variable.parameter#ffb86bitalic
entity.name.function, support.function#7effb8—
meta.function-call#66ffcc—
entity.name.class, entity.name.type.class, support.class#9fffc5bold
entity.name.type, support.type#9fffc5—
entity.name.type.interface#7ee8e3italic
constant.numeric#ffb86b—
constant, constant.language, constant.character#ffe66b—
constant.language.boolean#ffb86bbold
variable.other.property, support.variable.property#66ffcc—
meta.object-literal.key#7effb8—
entity.name.tag, punctuation.definition.tag#00ffab—
entity.other.attribute-name#ff8fc8italic
punctuation, meta.brace#5effd1—
string.regexp#ffb86b—
constant.character.escape#ff8fc8—
meta.decorator, punctuation.decorator#ffe66b—
invalid, invalid.illegal#ff6b6bstrikethrough
markup.heading, entity.name.section#00ffabbold
markup.bold#ffb86bbold
markup.italic#ff8fc8italic
markup.underline.link#7ee8e3—
markup.inline.raw, markup.fenced_code#6b9fff—
support.type.property-name.json#00ffab—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffe66b—
support.type.property-name.css#7effb8—
support.constant.property-value.css#b7ff6a—