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.dropBackground
activityBar.foreground
activityBarBadge.background
activityBarBadge.foreground
badge.background
badge.foreground
button.background
button.foreground
button.hoverBackground
editor.background
editor.foreground
editor.lineHighlightBackground
editor.selectionBackground
editorBracketMatch.border
editorCursor.foreground
editorGroupHeader.tabsBackground
editorGroupHeader.tabsBorder
editorIndentGuide.background
editorOverviewRuler.border
editorWhitespace.foreground
editorWidget.background
editorWidget.border
focusBorder
foreground
input.background
input.border
input.foreground
input.placeholderForeground
list.activeSelectionBackground
list.focusBackground
list.highlightForeground
list.hoverBackground
list.inactiveSelectionBackground
notification.background
panel.border
scrollbar.shadow
sideBar.background
sideBarSectionHeader.background
sideBarSectionHeader.foreground
sideBarTitle.foreground
statusBar.background
statusBar.debuggingBackground
statusBar.debuggingForeground
statusBar.foreground
statusBar.noFolderBackground
statusBarItem.activeBackground
statusBarItem.hoverBackground
statusBarItem.prominentBackground
tab.activeBackground
tab.border
tab.inactiveBackground
tab.inactiveForeground
terminal.ansiBlack
terminal.ansiBlue
terminal.ansiBrightBlack
terminal.ansiBrightBlue
terminal.ansiBrightCyan
terminal.ansiBrightGreen
terminal.ansiBrightMagenta
terminal.ansiBrightRed
terminal.ansiBrightWhite
terminal.ansiBrightYellow
terminal.ansiCyan
terminal.ansiGreen
terminal.ansiMagenta
terminal.ansiRed
terminal.ansiWhite
terminal.ansiYellow
terminal.background
terminal.foreground
titleBar.activeBackground

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#3e4b53—
console.error#ca0000ff—
console.input#00ae50ff—
console.prompt#b651bcffbold
console.warning#cd6600ff—
console.debug#5d6666ff—
hyperlink#0d1171ff—
markup.deleted#ffffffff—
markup.inserted#000000ff—
markup.changed#f8f8f8ff—
markup.underline—underline
markup.bold—bold
markup.italic—italic
property#934b3cff—
comment#a06776—
constant#9b1cebff—
constant.other.placeholder.py#7b0000ff—
entity#cc3611ff—
entity.name.type#6c65b0ff—
entity.other.inherited-class#000000ff—
entity.name.function#db7800ff—
entity.name.function.argument#a28d00ff—
entity.name.tag#2369b6ff—
entity.other.attribute-name#cb2d01ff—
keyword#577909bold
keyword.control#577909—
storage#577909bold
token.storage.js,token.storage.ts#577909bold
keyword.operator.expression.delete.js,keyword.operator.expression.in.js,keyword.operator.expression.of.js,keyword.operator.expression.instanceof.js,keyword.operator.new.js,keyword.operator.expression.typeof.js,keyword.operator.expression.void.js#577909bold
meta.selector#577909bold
string | punctuation.definition.string#2aa198—
string, entity.other.inherited-class#2aa198—
Number#9b3affff—
#9b3affff—
support#3c7a03ff—
variable#499504—
variable.parameter#a57800ff—
keyword.operator#577909normal
keyword.operator.logical.js,keyword.operator.logical.ts#ca004b—
keyword.operator.arithmetic.js,keyword.operator.comparison.js,keyword.operator.arithmetic.ts,keyword.operator.comparison.ts#56b6c2—
invalid.deprecated#333333ffunderline,bold
invalid.illegal#333333ff—
string source#080808ff—
String constant#696969ff—
string variable#234a97ff—
string.regexp#cf5628ff—
string.regexp.character-class, string.regexp constant.character.escaped, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#cf5628ff—
string.regexp constant.character.escape#811f24ff—
text source#080808ff—
function name#ae7a00ff—
function argument#99a600ff—
support.function#ca004bff—
support.constant#c44f00ff—
support.variable#295502ff—
entity.name.type.namespace#e5c07b—
support.class, entity.name.type.class#e5c07b—
entity.name.class.identifier.namespace.type#e5c07b—
entity.name.class#61afef—
entity.name.type#e5c07b—
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66—
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#d19a66—
support.type.vendored.property-name.css#56b6c2—
punctuation.definition.template-expression.begin.js,punctuation.definition.template-expression.end.js,punctuation.definition.template-expression.begin.ts,punctuation.definition.template-expression.end.ts#499504—
support.module.node.js,support.type.object.module.js,support.module.node.js,support.module.node.ts,support.type.object.module.ts,support.module.node.ts#e5c07b—
variable.other.readwrite.js,meta.object-literal.key.js,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,meta.object-literal.key.ts,support.variable.property.ts,support.variable.object.process.ts#499504—
support.constant.json.js,support.constant.json.ts#d19a66—
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909normal
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909normal
support.type.object.console.js,support.type.object.console.ts#499504—
entity.name.function.js,support.function.console.js,entity.name.function.ts,support.function.console.ts#61afef—
keyword.operator.js,keyword.operator.ts#56b6c2—
support.type.object.dom.js,support.type.object.dom.ts#56b6c2—
support.variable.dom.js,support.variable.property.dom.js,support.variable.dom.ts,support.variable.property.dom.ts,#499504—
var.this.js,var.this.ts,variable.language.this.js,variable.language.this.ts#e5c07b—
markup.list#7d451cff—
markup.heading | markup.heading entity.name#142b5aff—
markup.quote#0b6125ff—
Markup.italic#080808ff—
markup.bold#080808ffbold
markup.underline#080808ffunderline
markup.link#234a97ffunderline
markup.raw#234a97ff—
markup.deleted#47565fff—
markup.inserted#cc0000ff—
markup.changed#ffffffff—
ThemeDatabase All Themes by enes ozturk - VS Code Theme