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.border
editorSuggestWidget.foreground
editorSuggestWidget.highlightForeground
focusBorder
list.activeSelectionBackground
list.inactiveSelectionBackground
menu.selectionBackground
menu.selectionForeground
menubar.selectionBackground
menubar.selectionForeground
panelTitle.activeBorder
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.inactiveModifiedBorder
tab.unfocusedActiveModifiedBorder
tab.unfocusedInactiveModifiedBorder
terminal.background
textLink.activeForeground
textLink.foreground
titleBar.activeBackground
titleBar.activeForeground
titleBar.border

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#4d4d4d—
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#757575—
comment, punctuation.definition.comment#787878—
variable, string constant.other.placeholder, source#4d4d4d—
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#ffae57—
invalid, invalid.illegal#FF3A00—
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, 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#4d4d4d—
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, 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#C84040—
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#C47000—
meta.block variable.other#4d4d4d—
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#4d4d4d—
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#757575—
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#B36D00—
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#757575—
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, support.type.property-name, support.variable.object.node, support.variable.object.process#757575—
entity.name.module.js, variable.import.parameter.js#FF3A00—
variable.language#757575—
entity.name.method.js#757575—
meta.class-method.js entity.name.function.js, variable.function.constructor#757575—
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#E97318—
source.sass keyword.control#757575—
markup.inserted#757575—
markup.deleted#FF3A00—
markup.changed#E97318—
string.regexp#E97318—
constant.character.escape#757575—
*url*, *link*, *uri*—underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#757575—
source.js constant.other.object.key.js string.unquoted.label.js#FF3A00—
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#E97318—
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#E97318—
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 support.type.property-name.json#E97318—
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#E97318—
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#E97318—
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#E97318—
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#E97318—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E97318—
markup.italic#FF3A00italic
markup.bold#FF3A00bold
markup.underline#ffae57underline
markup.strike#ffcc66italic
markup.quote#757575italic
markup.raw.block#ffae57—
markup.table#757575—
text.html.markdown, punctuation.definition.list_item.markdown#333333—
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#757575—
text.html.markdown meta.dummy.line-break#333333—
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#757575—
markup.quote, punctuation.definition.blockquote.markdown#757575italic
string.other.link.title.markdown#ffcc66underline
markup.raw.block.fenced.markdown#555555—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#333333—
variable.language.fenced.markdown#333333
meta.separator#333333
token.info-token#757575—
token.warn-token#ffcc66—
token.error-token#FF3A00—
token.debug-token#ffae57—
storage.type.error.go#757575—
punctuation.other.period.go#ffae57—
ThemeDatabase All Themes by enes ozturk - VS Code Theme