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#030607
  • activityBar.border#253d4240
  • activityBar.foreground#00ffcc
  • activityBar.inactiveForeground#5b757c
  • activityBarBadge.background#00ffcc
  • activityBarBadge.foreground#030607
  • button.background#00ffcc
  • button.foreground#030607
  • button.hoverBackground#5cffe2
  • chat.avatarBackground#00ffcc
  • chat.avatarForeground#030607
  • chat.background#030607
  • chat.border#253d4240
  • chat.replyBackground#030607
  • chat.requestBackground#0a1518
  • editor.background#060c0e
  • editor.foreground#e2ecef
  • editor.inactiveSelectionBackground#00ffcc12
  • editor.lineHighlightBackground#101e22
  • editor.lineHighlightBorder#ffffff00
  • editor.selectionBackground#00ffcc2d
  • editorCursor.foreground#00ffcc
  • editorGroupHeader.tabsBackground#030607
  • editorGroupHeader.tabsBorder#253d4240
  • editorWidget.background#060c0e
  • editorWidget.border#253d42a0
  • input.background#0a1518
  • input.border#253d42a0
  • input.foreground#e2ecef
  • input.placeholderForeground#5b757c80
  • inputOption.activeBorder#00ffcc
  • interactive.activeCodeBorder#00ffcc
  • interactive.background#060c0e
  • interactive.inactiveCodeBorder#253d4240
  • list.activeSelectionBackground#101e22
  • list.activeSelectionForeground#00ffcc
  • list.focusBackground#101e22
  • list.highlightForeground#5cffe2
  • list.hoverBackground#0a151888
  • list.inactiveSelectionBackground#0a151888
  • list.inactiveSelectionForeground#8da1a6
  • panel.background#030607
  • panel.border#253d4240
  • panelTitle.activeBorder#00ffcc
  • panelTitle.activeForeground#00ffcc
  • panelTitle.inactiveForeground#5b757c
  • scrollbarSlider.activeBackground#00ffcc35
  • scrollbarSlider.background#00ffcc10
  • scrollbarSlider.hoverBackground#00ffcc22
  • sideBar.background#030607
  • sideBar.border#253d4240
  • sideBar.foreground#8da1a6
  • sideBarSectionHeader.background#0a1518
  • sideBarSectionHeader.border#253d4215
  • sideBarSectionHeader.foreground#e2ecef
  • sideBarTitle.foreground#00ffcc
  • statusBar.background#030607
  • statusBar.border#253d4240
  • statusBar.foreground#00ffcc
  • statusBar.noFolderBackground#030607
  • tab.activeBackground#060c0e
  • tab.activeBorder#00ffcc
  • tab.activeForeground#00ffcc
  • tab.border#253d4215
  • tab.inactiveBackground#030607
  • tab.inactiveForeground#5b757c
  • terminal.ansiCyan#00ffcc
  • terminal.background#030607
  • terminal.border#253d4240
  • terminal.foreground#e2ecef
  • titleBar.activeBackground#030607
  • titleBar.activeForeground#00ffcc
  • titleBar.border#253d4240
  • titleBar.inactiveBackground#030607
  • titleBar.inactiveForeground#5b757c
  • widget.border#253d42a0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5b757citalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.other.object, variable.other, variable.other.member#e2ecef
constant.other.color#ffffff
invalid, invalid.illegal#ff7096
keyword, storage.type, storage.modifier, keyword.control#d1a3ff
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator#82aaff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#00ffcc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#00ffcc
meta.block variable.other#e2ecef
support.other.variable, string.other.link#d1a3ff
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff7096
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8effd8
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, entity.name.type#82aaff
support.type#82aaff
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#82aaff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#00ffcc
variable.language#00ffccitalic
entity.name.method.js#00ffccitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#00ffcc
entity.other.attribute-name#d1a3ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#82aaffitalic
entity.other.attribute-name.class#82aaff
source.sass keyword.control#00ffcc
markup.inserted#8effd8
markup.deleted#ff7096
markup.changed#d1a3ff
string.regexp#00ffcc
constant.character.escape#00ffcc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#00ffccitalic
source.js constant.other.object.key.js string.unquoted.label.js#00ffccitalic
source.json meta.structure.dictionary.json support.type.property-name.json#00ffcc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82aaff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8effd8
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff7096
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e2ecef
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00ffcc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#00ffcc
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82aaff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8effd8
text.html.markdown, punctuation.definition.list_item.markdown#e2ecef
text.html.markdown markup.inline.raw.markdown#ff7096
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5b757c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#00ffccbold
markup.italic#d1a3ffitalic
markup.bold, markup.bold string#d1a3ffbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#d1a3ffbold
markup.underline#00ffccunderline
markup.quote punctuation.definition.blockquote.markdown#5b757c
markup.quoteitalic
string.other.link.title.markdown#00ffcc
string.other.link.description.title.markdown#d1a3ff
constant.other.reference.link.markdown#ff7096
markup.raw.block#ff7096
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e2ecef
variable.language.fenced.markdown#5b757c
meta.separator#5b757cbold
markup.table#e2ecef