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
debugIcon.continueForeground
debugIcon.disconnectForeground
debugIcon.pauseForeground
debugIcon.restartForeground
debugIcon.startForeground
debugIcon.stepBackForeground
debugIcon.stepIntoForeground
debugIcon.stepOutForeground
debugIcon.stepOverForeground
debugIcon.stopForeground
editor.background
editor.foreground
editor.selectionBackground
editor.selectionHighlightBackground
editorBracketHighlight.foreground1
editorBracketHighlight.foreground2
editorBracketHighlight.foreground3
editorBracketMatch.border
editorCursor.foreground
editorGroup.border
editorGroup.dropBackground
editorGroup.dropIntoPromptBackground
editorGroupHeader.noTabsBackground
editorGroupHeader.tabsBackground
editorGroupHeader.tabsBorder
editorGutter.addedBackground
editorGutter.background
editorGutter.deletedBackground
editorGutter.modifiedBackground
editorOverviewRuler.bracketMatchForeground
sideBar.background
sideBar.border
sideBar.foreground
sideBarSectionHeader.background
sideBarSectionHeader.border
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.border
statusBar.debuggingBackground
statusBar.debuggingForeground
statusBar.foreground
statusBar.noFolderBackground
statusBar.noFolderForeground
statusBarItem.activeBackground
statusBarItem.compactActiveBackground
statusBarItem.compactHoverBackground
statusBarItem.hoverBackground
statusBarItem.prominentBackground
statusBarItem.prominentHoverBackground
tab.activeBackground
tab.activeBorder
tab.activeForeground
tab.activeModifiedBorder
tab.border
tab.inactiveBackground
tab.inactiveForeground
tab.inactiveModifiedBorder
tab.unfocusedActiveForeground
tab.unfocusedActiveModifiedBorder
tab.unfocusedInactiveForeground
tab.unfocusedInactiveModifiedBorder
titleBar.activeBackground
titleBar.activeForeground
titleBar.inactiveBackground
titleBar.inactiveForeground
walkThrough.embeddedEditorBackground
widget.shadow

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#63638f—
variable, string constant.other.placeholder#ababab—
constant.other.color#77aeff—
invalid, invalid.illegal#ababab—
keyword, storage.type, storage.modifier#77aeff—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ababab—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ababab—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ababab—
meta.block variable.other#ababab—
support.other.variable, string.other.link#ababab—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other, string.quoted, string.template, punctuation.definition.string#9fbdff—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8a8a8a—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ababab—
support.type#ababab—
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#ababab—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ababab—
variable.language#abababitalic
entity.name.method.js#abababitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ababab—
entity.other.attribute-name#8a8a8a—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8a8a8aitalic
entity.other.attribute-name.class#ababab—
source.sass keyword.control#ababab—
markup.inserted#ababab—
markup.deleted#8a8a8a—
markup.changed#8a8a8a—
string.regexp#8a8a8a—
constant.character.escape#8a8a8a—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#abababitalic
source.js constant.other.object.key.js string.unquoted.label.js#abababitalic
source.json meta.structure.dictionary.json support.type.property-name.json#ababab—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ababab—
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#8a8a8a—
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#8a8a8a—
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#8a8a8a—
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#8a8a8a—
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#8a8a8a—
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#7a7a7a—
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#777777—
text.html.markdown, punctuation.definition.list_item.markdown#ababab—
text.html.markdown markup.inline.raw.markdown#ababab—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ababab—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ababab—
markup.italic#abababitalic
markup.bold, markup.bold string#abababbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#abababbold
markup.underline#abababunderline
markup.quote punctuation.definition.blockquote.markdown#ababab—
markup.quote—italic
string.other.link.title.markdown#ababab—
string.other.link.description.title.markdown#7a7a7a—
constant.other.reference.link.markdown#ababab—
markup.raw.block#ababab—
markup.raw.block.fenced.markdown#212121—
punctuation.definition.fenced.markdown#212121—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#2121210a—
variable.language.fenced.markdown#ababab—
meta.separator#abababbold
markup.table#ababab—
ThemeDatabase All Themes by enes ozturk - VS Code Theme