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
activityBarBadge.background
activityBarTop.activeBackground
activityBarTop.activeBorder
activityBarTop.foreground
button.background
button.hoverBackground
dropdown.background
editor.background
editor.foreground
editor.inactiveSelectionBackground
editor.selectionHighlightBackground
editorGroupHeader.tabsBackground
editorIndentGuide.activeBackground
editorIndentGuide.background
editorLineNumber.activeForeground
focusBorder
input.background
input.placeholderForeground
list.activeSelectionBackground
list.dropBackground
list.focusHighlightForeground
list.inactiveSelectionBackground
menu.background
menu.foreground
notifications.background
panel.border
panelTitle.activeBorder
sideBar.background
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarTitle.foreground
statusBar.background
statusBar.debuggingBackground
statusBar.noFolderBackground
statusBarItem.remoteBackground
statusBarItem.remoteForeground
tab.activeBorderTop
tab.inactiveBackground
tab.lastPinnedBorder
tab.unfocusedHoverForeground
titleBar.activeBackground
titleBar.inactiveBackground

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#78D1E1—
source#E1E1E6—
meta.diff, meta.diff.header#5A4B81—
markup.inserted#67e480—
markup.deleted#E96379—
markup.changed#E89E64—
invalid#E96379underline italic
invalid.deprecated#E1E1E6underline italic
entity.name.filename#e7de79—
markup.error#E96379—
markup.underline—underline
markup.bold#E89E64bold
markup.heading#78D1E1bold
markup.italic#e7de79italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#988bc7—
markup.inline.raw, markup.raw.restructuredtext#67e480—
markup.underline.link, markup.underline.link.image#988bc7—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6—
entity.name.directive.restructuredtext, markup.quote#e7de79italic
meta.separator.markdown#5A4B81—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#67e480—
punctuation.definition.constant.restructuredtext#78D1E1—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#78D1E1—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#E1E1E6—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e7de79—
entity.name.type.class, entity.name.class#988bc7
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#78D1E1italic
entity.other.inherited-class#988bc7italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#5A4B81—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6—
comment.block.documentation entity.name.type#988bc7italic
comment.block.documentation entity.name.type punctuation.definition.bracket#988bc7—
comment.block.documentation variable#E89E64italic
constant, variable.other.constant#78D1E1—
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6—
entity.name.tag#FF79C6—
entity.other.attribute-name.parent-selector#FF79C6—
entity.other.attribute-name.id#e7de79italic
entity.other.attribute-name#67e480italic
meta.tag.inline source#e7de79—
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#67e480—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#E89E64italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#67e480italic
meta.decorator variable.other.object#67e480—
keyword, punctuation.definition.keyword#FF79C6—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF79C6—
support#988bc7italic
support.function.magic, support.variable, variable.other.predefined#78D1E1
support.function, support.type.property-name—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FF79C6—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#E1E1E6—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FF79C6—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#988bc7—
constant.other.date, constant.other.timestamp#E89E64—
variable.other.alias.yaml#67e480italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#988bc7italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#E89E64—
storage.modifier#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e7de79—
punctuation.definition.group.capture.regexp#FF79C6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#E96379—
punctuation.definition.character-class.regexp#988bc7—
punctuation.definition.group.regexp#E89E64—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#E96379—
meta.assertion.look-ahead.regexp#67e480—
string#e7de79—
punctuation.definition.string.begin, punctuation.definition.string.end#e7de79—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7159C1—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#5A4B81—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#E1E1E6—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#E89E64italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#E1E1E6
meta.selectionset.graphql variable#e7de79—
meta.selectionset.graphql meta.arguments variable#E1E1E6—
entity.name.fragment.graphql, variable.fragment.graphql#988bc7—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#E1E1E6—
source.shell variable.other#78D1E1—
support.constant#78D1E1
meta.scope.prerequisites.makefile#e7de79—
meta.attribute-selector.scss#e7de79—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#E1E1E6—
meta.preprocessor.haskell#5A4B81—