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.border
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
button.background
contrastBorder
dropdown.border
editor.background
editor.foreground
editor.lineHighlightBackground
editor.lineHighlightBorder
editor.selectionBackground
editor.selectionForeground
editorBracketHighlight.foreground1
editorBracketHighlight.foreground2
editorBracketHighlight.foreground3
editorBracketHighlight.foreground4
editorBracketHighlight.foreground5
editorBracketHighlight.foreground6
editorBracketMatch.border
editorBracketPairGuide.activeBackground1
editorBracketPairGuide.activeBackground2
editorBracketPairGuide.activeBackground3
editorBracketPairGuide.activeBackground4
editorBracketPairGuide.activeBackground5
editorBracketPairGuide.activeBackground6
editorBracketPairGuide.background1
editorBracketPairGuide.background2
editorBracketPairGuide.background3
editorBracketPairGuide.background4
editorBracketPairGuide.background5
editorBracketPairGuide.background6
editorCursor.foreground
editorLightBulb.foreground
editorLightBulbAutoFix.foreground
editorLineNumber.foreground
editorOverviewRuler.bracketMatchForeground
editorSuggestWidget.background
editorSuggestWidget.border
editorSuggestWidget.foreground
editorSuggestWidget.highlightForeground
focusBorder
list.activeSelectionBackground
list.hoverBackground
list.inactiveSelectionBackground
menu.selectionBackground
menu.selectionForeground
menubar.selectionBackground
menubar.selectionForeground
panel.background
panel.border
panelTitle.activeBorder
panelTitle.activeForeground
panelTitle.inactiveForeground
scrollbarSlider.activeBackground
scrollbarSlider.hoverBackground
selection.background
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.border
statusBar.foreground
statusBar.noFolderBackground
statusBarItem.prominentBackground
statusBarItem.remoteBackground
statusBarItem.remoteForeground
symbolIcon.arrayForeground
tab.activeBackground
tab.activeBorder
tab.activeModifiedBorder
tab.inactiveBackground
tab.inactiveForeground
tab.inactiveModifiedBorder
tab.unfocusedActiveModifiedBorder
tab.unfocusedInactiveModifiedBorder
terminal.background
terminal.foreground
textLink.activeForeground
textLink.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.border
titleBar.inactiveBackground
titleBar.inactiveForeground

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d4d4d4—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted punctuation.definition.string.begin, string.quoted punctuation.definition.string.end#ce9178—
comment, punctuation.definition.comment#52525bitalic
variable, string constant.other.placeholder#fdba74—
source#d4d4d4—
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ce9178—
invalid, invalid.illegal#f44747—
keyword, storage.type, storage.modifier, constant.language, support.constant#E97318—
constant.numeric, constant.character, constant.escape#E97318—
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks#d4d4d4—
punctuation.separator.key-value.html, keyword.control, keyword.operator, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.accessor, punctuation.separator.property, string.unquoted.filter-pipe#E97318—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#E97318—
markup.deleted.git_gutter#f44747—
keyword.control.import, keyword.control.export, keyword.control.from#E97318—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#DCDCAA—
meta.block variable.other#d4d4d4—
variable.parameter, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#d4d4d4—
text.html#d4d4d4—
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#ce9178—
markup.inserted.git_gutter#a0a0a0—
markup.heading, entity.name.section.markdown#E97318bold
meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#d4d4d4—
entity.name.import.go#d4d4d4—
entity.name, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, meta.object-literal.key#d7ba7d—
support.type, support.type.sys-types#d7ba7d—
markup.changed.git_gutter#E97318—
support.class, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#d7ba7d—
keyword.other.debugger#E97318—
variable.graphql, variable.other.readwrite#d4d4d4—
meta.property-name, punctuation.definition.raw.markdown#d4d4d4—
support.type.property-name, support.variable.object.node, support.variable.object.process#d4d4d4—
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#d4d4d4—
entity.name.module.js, variable.import.parameter.js#d7ba7d—
variable.language#E97318—
entity.name.method.js#DCDCAA—
meta.class-method.js entity.name.function.js, variable.function.constructor#DCDCAA—
entity.other.attribute-name#E97318—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E97318—
entity.other.attribute-name.class, punctuation.definition.entity.css#d7ba7d—
source.sass keyword.control, entity.other.attribute-name.id#d7ba7d—
markup.inserted#a0a0a0—
markup.deleted#f44747—
markup.changed#E97318—
string.regexp#d16969—
constant.character.escape#d7ba7d—
*url*, *link*, *uri*#E97318underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#DCDCAA—
source.js constant.other.object.key.js string.unquoted.label.js#d4d4d4—
source.json meta.structure.dictionary.json support.type.property-name.json#E97318—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DCDCAA—
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#DCDCAA—
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, 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, 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, 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, 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, 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#d7ba7d—
markup.italic#E97318italic
markup.bold#E97318bold
markup.underline—underline
markup.strike#888888strikethrough
markup.quote#a0a0a0italic
markup.raw.block#ce9178—
markup.table#d4d4d4—
text.html.markdown, punctuation.definition.list_item.markdown#d4d4d4—
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#ce9178—
text.html.markdown meta.dummy.line-break#d4d4d4—
punctuation.definition.heading.markdown#E97318bold
punctuation.definition.blockquote.markdown#a0a0a0italic
string.other.link.title.markdown, markup.underline.link.markdown#ce9178
markup.underline.link.markdown#E97318underline
markup.raw.block.fenced.markdown#ce9178—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#858585—
meta.separator#858585bold
token.info-token#E97318—
token.warn-token#FFA500—
token.error-token#F44747—
token.debug-token#ffae57—
storage.type.error.go#858585—
punctuation.other.period.go#d4d4d4—