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
activityBarBadge.background
activityBarBadge.foreground
button.background
button.foreground
button.hoverBackground
debugToolBar.background
diffEditor.insertedTextBackground
dropdown.background
dropdown.border
dropdown.listBackground
editor.background
editor.findMatchHighlightBackground
editor.lineHighlightBackground
editor.selectionBackground
editorCursor.foreground
editorError.foreground
editorGroup.border
editorGroupHeader.tabsBackground
editorHoverWidget.background
editorHoverWidget.border
editorIndentGuide.background
editorLineNumber.foreground
editorRuler.foreground
editorSuggestWidget.background
editorSuggestWidget.border
editorSuggestWidget.selectedBackground
editorWhitespace.foreground
editorWidget.background
gitDecoration.conflictingResourceForeground
gitDecoration.deletedResourceForeground
gitDecoration.ignoredResourceForeground
gitDecoration.modifiedResourceForeground
gitDecoration.untrackedResourceForeground
input.background
input.border
input.foreground
input.placeholderForeground
list.activeSelectionBackground
list.activeSelectionForeground
list.focusBackground
list.highlightForeground
list.hoverBackground
list.inactiveSelectionBackground
list.inactiveSelectionForeground
scrollbarSlider.activeBackground
scrollbarSlider.background
scrollbarSlider.hoverBackground
sideBar.background
sideBarSectionHeader.background
statusBar.background
statusBar.debuggingBackground
statusBar.foreground
statusBar.noFolderBackground
statusBarItem.hoverBackground
tab.activeBackground
tab.border
tab.inactiveBackground
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
titleBar.inactiveForeground
walkThrough.embeddedEditorBackground

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
global#bfc7d5—
comment#697098italic
string#C3E88D—
string.quoted#C3E88D—
support.constant.math#ffcb6b—
constant.numeric, constant.character.numeric#F78C6C—
constant.language, punctuation.definition.constant, variable.other.constant#82AAFF—
constant.character, constant.other#82AAFF—
constant.character.escape#F78C6C—
string.regexp, string.regexp keyword.other#80CBC4—
meta.function punctuation.separator.comma#eeffff—
variable#ffcb6b—
punctuation.accessor, keyword#c792ea—
storage#c792ea—
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#c792ea—
entity.name.class, meta.class entity.name.type.class#ffcb6b—
entity.other.inherited-class#a9c77d—
entity.name.function#82AAFF—
variable.parameter#7986E7—
punctuation.definition.tag, meta.tag#89DDFF—
entity.name.tag support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#ff5572—
entity.other.attribute-name#ffcb6b—
entity.name.tag.custom#ffcb6b—
support.function, support.constant#82AAFF—
support.constant.meta.property-value#89DDFF—
support.type, support.class#ffcb6b—
support.variable.dom#ffcb6b—
invalid#ffffff—
invalid.deprecated#ffffff—
keyword.operator#89DDFF—
keyword.operator.relational#c792ea—
keyword.operator.assignment#c792ea—
comment.line.double-slash#697098—
object#cdebf7—
constant.language.null#ff5874—
meta.brace#bfc7d5—
meta.delimiter.period#c792ea—
punctuation.definition.string#d9f5dd—
constant.language.boolean#ff5874—
object.comma#ffffff—
variable.parameter.function#89DDFF—
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#80CBC4—
meta.property-list entity.name.tag.reference#ff5572—
constant.other.color.rgb-value punctuation.definition.constant#F78C6C—
constant.other.color#FFEB95—
keyword.other.unit#FFEB95—
meta.selector#c792ea—
entity.other.attribute-name.id#FAD430—
meta.property-name#80CBC4—
entity.name.tag.doctype, meta.tag.sgml.doctype#c792eaitalic
punctuation.definition.parameters#d9f5dd—
keyword.control.operator#89DDFF—
keyword.operator.logical#c792ea—
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#ff5572—
variable.other.property, variable.other.object.property#89DDFF—
entity.name.function#82AAFF—
keyword.operator.comparison#c792ea—
support.constant, keyword.other.special-method, keyword.other.new#89DDFF—
support.function#89DDFF—
invalid.broken#020e14—
invalid.unimplemented#ffffff—
invalid.illegal#ffffff—
variable.language#ff5572—
support.variable.property#89DDFF—
variable.function#82AAFF—
variable.interpolation#ec5f67—
meta.function-call#82AAFF—
punctuation.section.embedded#d3423e—
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#bfc7d5—
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#d9f5dd—
string.template meta.template.expression#d3423e—
string.template punctuation.definition.string#bfc7d5—
italic#c792eaitalic
bold#ffcb6bbold
quote#697098italic
raw#80CBC4—
variable.assignment.coffee#89DDFF—
variable.parameter.function.coffee#bfc7d5—
variable.assignment.coffee#89DDFF—
variable.other.readwrite.cs#bfc7d5—
entity.name.type.class.cs, storage.type.cs#82AAFF—
entity.name.type.namespace.cs#B2CCD6—
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#ff5572—
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#ff5572—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.css entity.other.attribute-name.attribute#F78C6C—
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#82AAFF—
source.elixir entity.name.function#ffcb6b—
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#82AAFF—
source.elixir punctuation.definition.string#a9c77d—
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#ffcb6b—
source.elixir .punctuation.binary.elixir#c792ea—
source.go meta.function-call.go#DDDDDD—
entity.other.attribute-name.id.html#ffcb6b—
punctuation.definition.tag.html#89DDFF—
meta.tag.sgml.doctype.html#c792eaitalic
meta.class entity.name.type.class.js#ffcb8b—
meta.method.declaration storage.type.js#82AAFFnormal
terminator.js#bfc7d5—
meta.js punctuation.definition.js#bfc7d5—
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#eeffff—
variable.other.jsdoc, variable.other.phpdoc#78ccf0—
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#bfc7d5—
variable.parameter.function.js#7986E7—
variable.other.readwrite.js#bfc7d5—
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#bfc7d5—
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#bfc7d5—
variable.js, variable.other.js#bfc7d5—
entity.name.type.js, entity.name.type.module.js#ffcb8b—
support.class.js#bfc7d5—
support.type.property-name.json#C3E88D—
support.constant.json#ffcb6b—
meta.structure.dictionary.value.json string.quoted.double#80CBC4—
string.quoted.double.json punctuation.definition.string.json#80CBC4—
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff5874—
variable.other.ruby#bfc7d5—
constant.language.symbol.hashkey.ruby#89DDFF—
entity.name.tag.less#ff5572—
keyword.other.unit.css#FFEB95—
meta.attribute-selector.less entity.other.attribute-name.attribute#F78C6C—
markup.heading.markdown#82b1ff—
markup.italic.markdown#c792eaitalic
markup.bold.markdown#ffcb6bbold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#80CBC4—
markup.underline.link.markdown, markup.underline.link.image.markdown#ff869a—
string.other.link.title.markdown, string.other.link.description.markdown#bfc7d5—
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#82b1ff—
punctuation.definition.metadata.markdown#ff5572—
beginning.punctuation.definition.list.markdown#82b1ff—
variable.other.php#bec5d4—
support.class.php#ffcb8b—
meta.function-call.php punctuation#bfc7d5—
variable.other.global.php#ffcb6b—
variable.other.global.php punctuation.definition.variable#ffcb6b—
constant.language.python#ff5874—
variable.parameter.function.python, meta.function-call.arguments.python#7986E7—
meta.function-call.python, meta.function-call.generic.python#B2CCD6—
punctuation.python#bfc7d5—
entity.name.function.decorator.python#ffcb6b—
source.python variable.language.special#8EACE3—
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#DDDDDD—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#82AAFF—
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4—
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#F78C6C—
entity.name.tag.scss, entity.name.tag.sass#ff5572—
keyword.other.unit.scss, keyword.other.unit.sass#FFEB95—
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#bfc7d5—
entity.name.type.ts, entity.name.type.tsx#78ccf0—
support.class.node.ts, support.class.node.tsx#82AAFF—
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#eeffff—
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#bfc7d5—
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#82AAFF—
meta.tag.js meta.jsx.children.tsx#82AAFF—
entity.name.tag.yaml#89DDFF—
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.type, punctuation.definintion.string, punctuation—normal