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. A key in the color catalog links to its detail page.

keyHEXRGBRGBA
activityBar.activeBackground
activityBar.activeBorder
activityBar.background
activityBar.foreground
activityBarBadge.background
activityBarBadge.foreground
badge.background
breadcrumb.background
button.background
button.foreground
button.hoverBackground
commandCenter.activeBackground
commandCenter.activeBorder
commandCenter.background
commandCenter.border
commandCenter.foreground
dropdown.background
dropdown.foreground
dropdown.listBackground
editor.background
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findMatchHighlightBorder
editor.foreground
editorCursor.foreground
editorGroup.emptyBackground
editorGroupHeader.tabsBackground
editorSuggestWidget.background
editorSuggestWidget.border
editorWidget.background
editorWidget.border
editorWidget.resizeBorder
focusBorder
input.background
input.border
input.foreground
input.placeholderForeground
inputOption.activeBackground
inputOption.activeBorder
inputValidation.errorBackground
inputValidation.errorBorder
inputValidation.infoBackground
inputValidation.infoBorder
inputValidation.warningBackground
inputValidation.warningBorder
list.activeSelectionBackground
list.hoverBackground
list.inactiveSelectionBackground
scrollbar.shadow
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
selection.background
settings.checkboxBackground
settings.checkboxBorder
settings.dropdownBackground
settings.dropdownBorder
settings.dropdownListBorder
settings.focusedRowBackground
settings.headerBorder
settings.headerForeground
settings.numberInputBackground
settings.numberInputBorder
settings.textInputBackground
settings.textInputBorder
sideBar.background
sideBar.border
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
tab.activeBackground
tab.activeBorder
tab.inactiveBackground
tab.inactiveForeground
terminal.background
terminal.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
toolbar.activeBackground
window.activeBorder

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A77979italic
variable, string constant.other.placeholder#e68cff—
constant.other.color#000000—
invalid, invalid.illegal#FF5370—
keyword, storage.type, storage.modifier#00a6ff—
entity.name.variable.field#00a6ff—
source.go punctuation#65737E—
source.go keyword.control, source.go constant.other.color, source.go meta.tag, source.go punctuation.definition.tag, source.go punctuation.separator.inheritance.php, source.go punctuation.definition.tag.html, source.go punctuation.definition.tag.begin.html, source.go punctuation.definition.tag.end.html, source.go punctuation.section.embedded, source.go keyword.other.template, source.go keyword.other.substitution#e68cff—
source.go entity.name.type, source.go entity.name.struct, source.go entity.name.interface, source.go entity.name.method, source.go entity.name.type.class, source.go entity.name.type.interface, source.go entity.name.type.struct, source.go entity.name.type.enum, source.go entity.name.type.union, source.go entity.name.type.typedef, source.go entity.name.type.module, source.go entity.name.type.instance, source.go entity.name.type.package, source.go entity.name.type.builtin, source.go entity.name.type#f62e38—
source.js meta.tag#2cd4ba—
source.js keyword.control#f4c909—
source.js constant.other.color, source.js punctuation#65737E—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#00a6ff—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#f4c909—
meta.block variable.other#f07178—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#6ae292d6—
source.go string, source.go constant.other.symbol, source.go constant.other.key, source.go entity.other.inherited-class, source.go markup.heading, source.go markup.inserted.git_gutter, source.go meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#6ae292d6—
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#a481fe—
#3AB0FF—
support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#CA82FF—
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#FF5370—
variable.language#FF5370italic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
entity.other.attribute-name#FFCB6B—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B—
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#F78C6C—
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#FF5370—
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#C17E70—
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#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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178—
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#C792EA—
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#C3E88D—
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF—
text.html.markdown markup.inline.raw.markdown#C792EA—
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#C3E88D—
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
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#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E—
markup.quote—italic
string.other.link.title.markdown#82AAFF—
string.other.link.description.title.markdown#C792EA—
constant.other.reference.link.markdown#FFCB6B—
markup.raw.block#C792EA—
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—