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

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.quote—italic
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—