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
badge.background
badge.foreground
diffEditor.insertedTextBackground
diffEditor.removedTextBackground
editor.background
editor.findMatchBackground
editor.findMatchHighlightBackground
editor.findRangeHighlightBackground
editor.foldBackground
editor.inactiveSelectionBackground
editor.lineHighlightBackground
editor.lineHighlightBorder
editor.selectionBackground
editor.selectionHighlightBackground
editor.wordHighlightBackground
editor.wordHighlightStrongBackground
editorBracketMatch.background
editorBracketMatch.border
editorCursor.foreground
editorGroupHeader.tabsBackground
editorHoverWidget.background
editorHoverWidget.border
editorLineNumber.foreground
editorLink.activeForeground
editorSuggestWidget.background
editorSuggestWidget.border
editorSuggestWidget.foreground
editorSuggestWidget.highlightForeground
editorSuggestWidget.selectedBackground
editorWidget.background
editorWidget.border
errorForeground
focusBorder
foreground
git.color.modified
gitDecoration.addedResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.untrackedResourceForeground
list.activeSelectionBackground
list.activeSelectionForeground
list.dropBackground
list.errorForeground
list.focusBackground
list.highlightForeground
list.hoverBackground
list.hoverForeground
list.inactiveFocusBackground
list.inactiveSelectionBackground
list.inactiveSelectionForeground
scrollbar.shadow
scrollbarSlider.background
scrollbarSlider.hoverBackground
selection.background
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.foreground
tab.activeBackground
tab.activeBorder
tab.activeForeground
tab.border
tab.inactiveBackground
tab.inactiveForeground
tab.unfocusedActiveBackground
tab.unfocusedActiveBorder
tab.unfocusedActiveForeground
widget.shadow

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#C990EBunderline
markup.italic#b66ae4—
text.html.derivative#AA51DF—
punctuation.accessor.js#b66ae4—
punctuation.accessor.jsx#b66ae4—
punctuation.accessor.ts#BC77E6—
punctuation.accessor.tsx#b66ae4—
source.js#BC77E6—
source.jsx#b66ae4—
source.ts#b66ae4—
source.tsx#B05DE2—
storage.modifier.js#b66ae4—
storage.modifier.jsx#C990EB—
storage.modifier.ts#b66ae4—
storage.modifier.tsx#C283E9—
punctuation.separator.key-value.js#b66ae4—
punctuation.separator.key-value.jsx#A344DD—
punctuation.separator.key-value.ts#BC77E6—
punctuation.separator.key-value.tsx#B05DE2—
storage.type#b66ae4—
string.quoted.single.js#C990EB—
string.quoted.single.jsx#b66ae4—
string.quoted.single.ts#AA51DF—
string.quoted.single.tsx#b66ae4—
support.function.dom.js#C990EB—
support.function.dom.jsx#BC77E6—
support.function.dom.ts#b66ae4—
support.function.dom.tsx#B05DE2—
support.variable.property.js#b66ae4—
support.variable.property.jsx#C990EB—
support.variable.property.ts#BC77E6—
support.variable.property.tsx#BC77E6—
variable.language.constructor#B05DE2underline
variable.language.this#b66ae4—
meta.var.expr.js#480032—
meta.var.expr.jsx#520039—
meta.var.expr.ts#480032—
meta.var.expr.tsx#480032—
keyword#480032—
expression.ng#480032—
meta.brace.round.js#480032—
meta.brace.round.jsx#4E0037—
meta.brace.round.ts#480032—
meta.brace.round.tsx#480032—
constant.language.boolean#520039—
constant.numeric#520039—
constant.language.null.js#4B0034—
constant.language.null.jsx#480032—
constant.language.null.ts#480032—
constant.language.null.tsx#480032—
entity.name.class#480032underline
entity.name.function#480032underline
entity.name.type#480032underline
markup.heading.markdown#480032—
punctuation.separator.comma.js#450030—
punctuation.separator.comma.jsx#480032—
punctuation.separator.comma.ts#450030—
punctuation.separator.comma.tsx#450030—
meta.tag.attributes.js#480032—
meta.tag.attributes.jsx#4B0034—
meta.tag.attributes.ts#480032—
meta.tag.attributes.tsx#480032—
support.variable.property.js#480032—
support.variable.property.jsx#480032—
support.variable.property.ts#4B0034—
support.variable.property.tsx#480032—
support.type.primitive.js#42002E—
support.type.primitive.jsx#450030—
support.type.primitive.ts#450030—
support.type.primitive.tsx#4B0034—
variable#3E002B—
source.go#0071B7—
string.quoted.double.html#0068a8—
keyword.control.import.js#0068a8—
keyword.control.import.jsx#0076BF—
keyword.control.import.ts#0068a8—
keyword.control.import.tsx#0068a8—
source.json#0068a8—
source.css#0068a8—
variable.parameter#0068a8—
support.function#0068a8—
support.type.object.module.js#0063A0—
support.type.object.module.jsx#0063A0—
support.type.object.module.ts#0063A0—
support.type.object.module.tsx#0063A0—
meta.import.js#0068a8—
meta.import.jsx#0068a8—
meta.import.ts#0068a8—
meta.import.tsx#0068a8—
meta.paragraph.markdown#0068a8—
entity.other.attribute-name.js#006DB0—
entity.other.attribute-name.jsx#005A91—
entity.other.attribute-name.ts#0063A0—
entity.other.attribute-name.tsx#0068a8—
string.quoted.single.js#0063A0—
string.quoted.single.jsx#0068a8—
string.quoted.single.ts#0068a8—
string.quoted.single.tsx#0063A0—
string.quoted.single.json#0071B7—
keyword.control.module.js#0068a8—
keyword.control.module.jsx#0068a8—
keyword.control.module.ts#0068a8—
keyword.control.module.tsx#0068a8—
support.class.promise.js#0071B7—
support.class.promise.jsx#0063A0—
support.class.promise.ts#0063A0—
support.class.promise.tsx#0068a8—
support.type.object.console.js#005F99—
support.type.object.console.jsx#0068a8—
support.type.object.console.ts#0076BF—
support.type.object.console.tsx#0068a8—
support.function.console.js#0063A0—
support.function.console.jsx#0068a8—
support.function.console.ts#0063A0—
support.function.console.tsx#0068a8—
punctuation.definition.block.js#005F99—
punctuation.definition.block.jsx#0068a8—
punctuation.definition.block.ts#0063A0—
punctuation.definition.block.tsx#0068a8—
entity.other.ng-binding-name.property.html#38978D—
punctuation.definition.parameters.begin.js#38978D—
punctuation.definition.parameters.begin.jsx#38978D—
punctuation.definition.parameters.begin.ts#359087—
punctuation.definition.parameters.begin.tsx#38978D—
punctuation.definition.parameters.end.js#3DA59A—
punctuation.definition.parameters.end.jsx#38978D—
punctuation.definition.parameters.end.ts#38978D—
punctuation.definition.parameters.end.tsx#38978D—
punctuation.definition.parameters.end.js#359087—
punctuation.definition.parameters.end.jsx#38978D—
punctuation.definition.parameters.end.ts#38978D—
punctuation.definition.parameters.end.tsx#38978D—
keyword.control.export.js#3DA59A—
keyword.control.export.jsx#338980—
keyword.control.export.ts#38978D—
keyword.control.export.tsx#38978D—
keyword.control.from.js#38978D—
keyword.control.from.jsx#3B9E93—
keyword.control.from.ts#3DA59A—
keyword.control.from.tsx#38978D—
markup.quote#359087—
meta.tag.js#38978D—
meta.tag.jsx#359087—
meta.tag.ts#359087—
meta.tag.tsx#38978D—
meta.parameters.js#3B9E93—
meta.parameters.jsx#38978D—
meta.parameters.ts#3DA59A—
meta.parameters.tsx#38978D—
meta.brace.square.js#359087—
meta.brace.square.jsx#359087—
meta.brace.square.ts#30837A—
meta.brace.square.tsx#338980—
variable.other.class.js#38978D—
variable.other.class.jsx#38978D—
variable.other.class.ts#38978D—
variable.other.class.tsx#338980—
constant.other.object.key.js#3B9E93—
constant.other.object.key.jsx#38978D—
constant.other.object.key.ts#38978D—
constant.other.object.key.tsx#3B9E93—
keyword.operator.accessor#38978D—
keyword.control.default.js#359087—
keyword.control.default.jsx#359087—
keyword.control.default.ts#38978D—
keyword.control.default.tsx#40ABA0—
entity.name.function.method#30837A—
string.template#38978D—
support.type.property-name.json#359087—
variable.other.property.js#30837A—
variable.other.property.jsx#359087—
variable.other.property.ts#30837A—
variable.other.property.tsx#359087—
entity.other.ng-binding-name.outputReplEvent.html#B1365B—
entity.other.inherited-class#B1365B—
support.constant#C13B63—
punctuation.separator.parameter.js#A93457—
punctuation.separator.parameter.jsx#B1365B—
punctuation.separator.parameter.ts#B9385F—
punctuation.separator.parameter.tsx#992F4F—
constant.character#B1365B—
constant.language#B1365B—
constant.other#A93457—
support.class.builtin.js#992F4F—
support.class.builtin.jsx#A93457—
support.class.builtin.ts#A93457—
support.class.builtin.tsx#B1365B—
comment#A93457—
markup.italic#A13153—
meta.object-literal.key.js#A93457—
meta.object-literal.key.jsx#B1365B—
meta.object-literal.key.ts#B1365B—
meta.object-literal.key.tsx#A93457—
comment.block.documentation#B1365B—
comment.line.double-slash#B1365B—
punctuation.accessor.js#992F4F—
punctuation.accessor.jsx#B1365B—
punctuation.accessor.ts#A93457—
punctuation.accessor.tsx#B1365B—
invalid#A93457underline
variable.language#B1365B—
storage.modifier.async.js#B1365B—
storage.modifier.async.jsx#B1365B—
storage.modifier.async.ts#C13B63—
storage.modifier.async.tsx#B1365B—
variable.other.object.js#A93457—
variable.other.object.jsx#B1365B—
variable.other.object.ts#992F4F—
variable.other.object.tsx#A13153—
variable.other.readwrite#B1365B—
variable.other.readwrite.js#B1365B—
variable.other.readwrite.jsx#B1365B—
variable.other.readwrite.ts#C13B63—
variable.other.readwrite.tsx#B1365B—