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#315bef
  • activityBar.background#363636
  • activityBar.dropBackground#242424
  • activityBar.foreground#eff0f1
  • activityBar.inactiveForeground#7f8c8d
  • badge.background#057AC8
  • badge.foreground#eff0f1
  • breadcrumb.background#363636
  • button.background#363636
  • button.foreground#eff0f1
  • button.hoverBackground#4d4d4d
  • checkbox.background#363636
  • checkbox.border#363636
  • checkbox.foreground#eff0f1
  • descriptionForeground#bdc3c7
  • dropdown.background#363636
  • dropdown.border#363636
  • dropdown.foreground#eff0f1
  • dropdown.listBackground#363636
  • editor.background#242424
  • editor.foreground#eff0f1
  • editorGroupHeader.tabsBackground#363636
  • editorPane.background#363636
  • errorForeground#da4453
  • focusBorder#3daee9
  • foreground#eff0f1
  • icon.foreground#eff0f1
  • input.background#363636
  • input.border#363636
  • input.foreground#eff0f1
  • input.placeholderForeground#bdc3c7
  • list.activeSelectionBackground#315bef
  • list.activeSelectionForeground#eff0f1
  • list.dropBackground#315bef88
  • list.errorForeground#da4453
  • list.filterMatchBackground#f67400
  • list.filterMatchBorder#f67400
  • list.focusBackground#315bef88
  • list.focusForeground#eff0f1
  • list.inactiveFocusBackground#315bef88
  • list.inactiveSelectionBackground#315bef88
  • list.inactiveSelectionForeground#eff0f1
  • list.warningForeground#f67400
  • listFilterWidget.background#363636
  • listFilterWidget.noMatchesOutline#f67400
  • listFilterWidget.outline#315bef
  • scrollbarSlider.activeBackground#315bef
  • scrollbarSlider.background#315bef88
  • scrollbarSlider.hoverBackground#315befcc
  • selection.background#3daee9
  • sideBar.background#242424
  • sideBar.border#4d4d4d
  • sideBarSectionHeader.background#363636
  • sideBarSectionHeader.foreground#eff0f1
  • statusBar.background#363636
  • statusBar.debuggingBackground#363636
  • statusBar.noFolderBackground#363636
  • tab.activeBackground#363636
  • tab.activeBorderTop#315bef
  • tab.border#4d4d4d
  • tab.inactiveBackground#363636
  • textBlockQuote.background#242424
  • textBlockQuote.border#3daee9
  • textCodeBlock.background#242424
  • textLink.activeForeground#315bef
  • textLink.foreground#315bef
  • textPreformat.foreground#f67400
  • textSeparator.foreground#bdc3c7
  • tree.indentGuidesStroke#7f8c8d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f8c8ditalic
variable, string constant.other.placeholder#eff0f1
constant.other.color#fcfcfc
invalid, invalid.illegal#ed1515
keyword, storage.type, storage.modifier#9b59b6
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#3daee9
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f47750
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#3498db
meta.block variable.other#f47750
support.other.variable, string.other.link#f47750
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f67400
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, punctuation.definition.string#23cc71
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#fdbc4b
support.type#1abc9c
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#1abc9c
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#da4453
variable.language#da4453italic
entity.name.method.js#1d99f3italic
meta.class-method.js entity.name.function.js, variable.function.constructor#1d99f3
entity.other.attribute-name#9b59b6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fdbc4bitalic
entity.other.attribute-name.class#fdbc4b
source.sass keyword.control#1d99f3
markup.inserted#23cc71
markup.deleted#da4453
markup.changed#9b59b6
string.regexp#3daee9
constant.character.escape#3daee9
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#1d99f3italic
source.js constant.other.object.key.js string.unquoted.label.js#da4453italic
source.json meta.structure.dictionary.json support.type.property-name.json#9b59b6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fdbc4b
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#f67400
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#da4453
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#8e44ad
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#1d99f3
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#f47750
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#9b59b6
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#23cc71
text.html.markdown, punctuation.definition.list_item.markdown#eff0f1
text.html.markdown markup.inline.raw.markdown#9b59b6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#34495e
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#23cc71
markup.italic#f47750italic
markup.bold, markup.bold string#f47750bold
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#f47750bold
markup.underline#f67400underline
markup.quote punctuation.definition.blockquote.markdown#34495e
markup.quoteitalic
string.other.link.title.markdown#1d99f3
string.other.link.description.title.markdown#9b59b6
constant.other.reference.link.markdown#fdbc4b
markup.raw.block#9b59b6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#eff0f1
variable.language.fenced.markdown#34495e
meta.separator#34495ebold
markup.table#eff0f1