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.background#580000
  • badge.background#cc3333
  • button.background#833
  • debugToolBar.background#660000
  • dropdown.background#580000
  • editor.background#390000
  • editor.foreground#F8F8F8
  • editor.hoverHighlightBackground#ff000044
  • editor.lineHighlightBackground#ff000033
  • editor.selectionBackground#aa0000
  • editor.selectionHighlightBackground#f5500039
  • editorCursor.foreground#ff0000
  • editorGroup.border#ff666633
  • editorGroupHeader.tabsBackground#330000
  • editorHoverWidget.background#300000
  • editorLineNumber.activeForeground#ffbbbb88
  • editorLineNumber.foreground#ff777788
  • editorLink.activeForeground#FFD0AA
  • editorSuggestWidget.background#300000
  • editorSuggestWidget.border#220000
  • editorWhitespace.foreground#c10000
  • editorWidget.background#300000
  • errorForeground#ffeaea
  • extensionButton.prominentBackground#cc3333
  • extensionButton.prominentHoverBackground#cc333388
  • focusBorder#ff6666aa
  • input.background#580000
  • inputOption.activeBorder#cc0000
  • inputValidation.infoBackground#550000
  • inputValidation.infoBorder#DB7E58
  • list.activeSelectionBackground#880000
  • list.dropBackground#662222
  • list.highlightForeground#ff4444
  • list.hoverBackground#800000
  • list.inactiveSelectionBackground#770000
  • minimap.selectionHighlight#750000
  • peekView.border#ff000044
  • peekViewEditor.background#300000
  • peekViewResult.background#400000
  • peekViewTitle.background#550000
  • pickerGroup.border#ff000033
  • pickerGroup.foreground#cc9999
  • ports.iconRunningProcessForeground#DB7E58
  • progressBar.background#cc3333
  • quickInputList.focusBackground#660000
  • selection.background#ff777788
  • sideBar.background#330000
  • statusBar.background#700000
  • statusBar.noFolderBackground#700000
  • statusBarItem.remoteBackground#c33
  • tab.activeBackground#490000
  • tab.inactiveBackground#300a0a
  • tab.lastPinnedBorder#ff000044
  • titleBar.activeBackground#770000
  • titleBar.inactiveBackground#772222

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#F8F8F8—
meta.embedded, source.groovy.embedded#F8F8F8—
comment#e7c0c0ff
constant#994646ff
keyword#f12727ff
entity#fec758ff
storage#ff6262ff
string#cd8d8dff
support#ff0000
variable#fb9a4bff
invalid#ffffffff—
entity.other.inherited-class#aa5507ffunderline
constant.character#ec0d1e—
string constant, constant.character.escape#ffe862ff
string.regexp#ffb454ff—
string variable#edef7dff—
support.function#ffb454ff
support.constant, support.variable#eb939aff
declaration.sgml.html declaration.doctype, declaration.sgml.html declaration.doctype entity, declaration.sgml.html declaration.doctype string, declaration.xml-processing, declaration.xml-processing entity, declaration.xml-processing string#73817dff
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#ec0d1eff
meta.selector.css entity.name.tag#aa5507ff
meta.selector.css entity.other.attribute-name.id#fec758ff—
meta.selector.css entity.other.attribute-name.class#41a83eff
support.type.property-name.css#96dd3bff
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#ffe862ff
meta.property-value support.constant.named-color.css, meta.property-value constant#ffe862ff
meta.preprocessor.at-rule keyword.control.at-rule#fd6209ff—
meta.constructor.argument.css#ec9799ff
meta.diff, meta.diff.header#f8f8f8ff
markup.deleted#ec9799ff—
markup.changed#f8f8f8ff—
markup.inserted#41a83eff—
markup.quote#f12727ff—
markup.list#ff6262ff—
markup.bold, markup.italic#fb9a4bff—
markup.bold—bold
markup.italic—italic
markup.strikethrough—strikethrough
markup.inline.raw#cd8d8dff
markup.heading, markup.heading.setext, punctuation.definition.heading, entity.name.section#fec758ffbold
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, .format.placeholder#ec0d1e—