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.background
activityBar.foreground
activityBar.inactiveForeground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
button.background
button.foreground
button.hoverBackground
dropdown.background
editor.background
editor.foreground
editor.inactiveSelectionBackground
editor.lineHighlightBorder
editor.selectionBackground
editorCursor.foreground
editorError.foreground
editorGroup.dropBackground
editorGroupHeader.tabsBackground
editorInfo.foreground
editorInlayHint.background
editorInlayHint.foreground
editorInlayHint.typeBackground
editorInlayHint.typeForeground
editorSuggestWidget.background
editorSuggestWidget.selectedBackground
editorWarning.foreground
editorWidget.background
focusBorder
foreground
gitDecoration.ignoredResourceForeground
input.background
input.border
input.foreground
input.placeholderForeground
list.activeSelectionBackground
list.dropBackground
list.hoverBackground
list.inactiveSelectionBackground
minimap.background
peekView.border
peekViewEditor.background
peekViewEditor.matchHighlightBackground
peekViewResult.background
peekViewResult.matchHighlightBackground
peekViewResult.selectionBackground
peekViewTitle.background
peekViewTitleDescription.foreground
progressBar.background
quickInput.background
quickInputList.focusBackground
scrollbar.shadow
sideBar.background
sideBar.foreground
sideBarSectionHeader.background
sideBarTitle.foreground
statusBar.background
statusBar.debuggingBackground
statusBar.noFolderBackground
statusBarItem.activeBackground
statusBarItem.errorBackground
statusBarItem.hoverBackground
statusBarItem.prominentBackground
statusBarItem.prominentHoverBackground
statusBarItem.remoteBackground
statusBarItem.remoteForeground
statusBarItem.warningBackground
tab.activeBackground
tab.activeBorder
tab.activeForeground
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBlue
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiYellow
terminalCursor.background
terminalCursor.foreground
terminalStickyScrollHover.background
titleBar.activeBackground
widget.shadow

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, markup.quote.markdown, meta.diff, meta.diff.header#a0a1a7cc—
meta.template.expression.js, constant.name.attribute.tag.jade, punctuation.definition.metadata.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.begin.markdown#E0E2F0—
string, text.html.php string, markup.inline.raw, markup.inserted, punctuation.definition.string, punctuation.definition.markdown, text.html meta.embedded source.js string, text.html.php punctuation.definition.string, text.html meta.embedded source.js punctuation.definition.string, text.html punctuation.definition.string, text.html string#96E072—
string.quoted.docstring punctuation.definition.string.begin.python, string.quoted.docstring, string.quoted.docstring punctuation.definition.string.end.python, comment.block.javadoc, comment.line.documentation.rust, comment.block.documentation#8ca777italic
source.regexp, string.regexp, string.regexp.quoted.multi punctuation.definition.string.begin.python, string.regexp.quoted.multi punctuation.definition.string.end.python#7cb7ff—
meta.import.js string.quoted, meta.import.ts string.quoted, meta.import.jsx string.quoted, meta.import.tsx string.quoted, storage.modifier.import.java, storage.modifier.package.java, meta.use.rust entity.name.namespace.rust, entity.name.module.rust, meta.preprocessor.include.c punctuation.definition.string.begin.c, meta.preprocessor.include.c string.quoted, meta.preprocessor.include.c punctuation.definition.string.end.c, meta.preprocessor.include.cpp punctuation.definition.string.begin.cpp, meta.preprocessor.include.cpp string.quoted, meta.preprocessor.include.cpp punctuation.definition.string.end.cpp, entity.name.import.go, entity.name.package.go#55c9ff—
variable, identifier#00e8c6—
meta.structure.dictionary.json support.type.property-name, entity.name.tag.yaml, support.type.property-name.table.toml, support.type.property-name.toml, constant.character.entity.html, source.css entity.name.tag.reference, source.css entity.other.attribute-name.parent-selector, beginning.punctuation.definition.list.markdown, meta.object-literal.key#00e8c6—
markup.heading, variable.language.this.js, variable.language.this.ts, variable.language.this.cpp, variable.language.self.rust, variable.language.special.self.python#ff00aa—
constant.numeric#147eff—
variable.other.property, entity.other.attribute-name, source.css keyword.other.unit, variable.other.object.property.js.jsx, variable.other.object.js#c74ded—
support.type.exception.python#ee5d43—
constant, support.constant#f39c12—
keyword.operator#ee5d43—
support.class#0cae00—
entity.name.function, source.css support.function, source.php support.function, meta.function-call, support.function.magic.python#FFE66D—
entity.name.type, support.type.python#0cae00—
entity.name.tag, tag.html#f92672—
keyword#ff00aa—
storage#ff00aa—
markup.bold#f39c12bold
markup.italic#7cb7ffitalic
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#7cb7ff—
meta.link, meta.image, source.js support.type#c74ded—
*url*, *link*, *uri*—underline
entity.other.inherited-class—underline
comment, invalid, keyword, entity.other.attribute-name—italic