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