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.activeBackground#180f1d
  • activityBar.activeBorder#da4167
  • activityBar.background#180f1d
  • activityBar.foreground#da4167
  • activityBar.inactiveForeground#f0eff4
  • activityBarBadge.background#da4167
  • activityBarBadge.foreground#09040e
  • badge.background#09040e
  • badge.foreground#da4167
  • button.background#180f1d
  • button.foreground#f0eff4
  • button.hoverBackground#221c3d
  • checkbox.border#da4167
  • debugIcon.breakpointForeground#da4167
  • debugToolBar.background#09040e
  • dropdown.background#09040e
  • dropdown.border#f0eff4
  • dropdown.foreground#f0eff4
  • dropdown.listBackground#09040e
  • editor.background#09040e
  • editor.foreground#f0eff4
  • editor.selectionBackground#180f1d
  • editorCursor.background#da4167
  • editorCursor.foreground#da4167
  • editorGroup.dropBackground#180f1d
  • editorGroupHeader.tabsBackground#180f1d
  • editorGutter.background#09040e
  • editorLineNumber.foreground#f0eff4
  • editorWidget.background#09040e
  • editorWidget.foreground#f0eff4
  • focusBorder#221c3d
  • gitDecoration.ignoredResourceForeground#4f2b62
  • gitDecoration.untrackedResourceForeground#6a83f1
  • input.background#180f1d
  • input.border#180f1d
  • input.foreground#f0eff4
  • inputOption.activeBackground#180f1d
  • inputOption.activeBorder#180f1d
  • inputOption.activeForeground#da4167
  • list.activeSelectionBackground#221c3d
  • list.activeSelectionForeground#f0eff4
  • list.errorForeground#da4167
  • list.focusForeground#f0eff4
  • list.hoverBackground#221c3d
  • list.hoverForeground#f0eff4
  • list.inactiveSelectionForeground#f0eff4
  • menu.background#180f1d
  • menu.foreground#f0eff4
  • menu.selectionBackground#09040e
  • menu.selectionForeground#da4167
  • menubar.selectionBackground#180f1d
  • panel.background#180f1d
  • panel.border#180f1d
  • panelTitle.activeBorder#da4167
  • panelTitle.activeForeground#f0eff4
  • scrollbar.shadow#180f1d
  • scrollbarSlider.activeBackground#da4167
  • scrollbarSlider.background#180f1d
  • scrollbarSlider.hoverBackground#da4167
  • sideBar.background#09040e
  • sideBar.border#da4167
  • sideBar.foreground#f0eff4
  • sideBarSectionHeader.background#180f1d
  • sideBarSectionHeader.foreground#f0eff4
  • sideBarTitle.foreground#da4167
  • statusBar.background#221c3d
  • statusBar.debuggingBackground#da4167
  • statusBar.debuggingForeground#09040e
  • statusBar.foreground#f0eff4
  • statusBar.noFolderBackground#221c3d
  • statusBar.noFolderForeground#f0eff4
  • tab.activeBackground#09040e
  • tab.activeForeground#f0eff4
  • tab.border#180f1d
  • tab.hoverBackground#180f1d
  • tab.hoverForeground#da4167
  • tab.inactiveBackground#180f1d
  • tab.inactiveForeground#f0eff4
  • tab.unfocusedActiveBackground#180f1d
  • terminal.foreground#f0eff4
  • terminal.selectionBackground#da4167
  • terminalCursor.foreground#da4167
  • textLink.activeForeground#da4167
  • textLink.foreground#f0eff4
  • titleBar.activeBackground#09040e
  • titleBar.activeForeground#f0eff4
  • titleBar.inactiveBackground#180f1d
  • titleBar.inactiveForeground#f0eff4
  • welcomePage.background#09040e
  • welcomePage.buttonBackground#180f1d
  • welcomePage.buttonHoverBackground#221c3d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#d7335c
keyword, storage.type, storage.modifier#850ad6
keyword.control, 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#f72585
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#4cc9f0
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6a83f1
meta.block variable.other#4895ef
support.other.variable, string.other.link#4895ef
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f72585
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#f0eff4
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#4895ef
support.type#B2CCD6
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#d7335c
variable.language#d7335citalic
entity.name.method.js#6a83f1italic
meta.class-method.js entity.name.function.js, variable.function.constructor#6a83f1
entity.other.attribute-name#850ad6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#4895efitalic
entity.other.attribute-name.class#4895ef
source.sass keyword.control#6a83f1
markup.inserted#f0eff4
markup.deleted#d7335c
markup.changed#850ad6
string.regexp#f72585
constant.character.escape#f72585
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#6a83f1italic
source.js constant.other.object.key.js string.unquoted.label.js#d7335citalic
source.json meta.structure.dictionary.json support.type.property-name.json#850ad6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4895ef
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#f72585
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#d7335c
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#850ad6
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#6a83f1
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#4cc9f0
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#850ad6
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f0eff4
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#850ad6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f0eff4
markup.italic#4cc9f0italic
markup.bold, markup.bold string#4cc9f0bold
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#4cc9f0bold
markup.underline#f72585underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#6a83f1
string.other.link.description.title.markdown#850ad6
constant.other.reference.link.markdown#4895ef
markup.raw.block#850ad6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF