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.

  • activityBar.activeBackground#eee8d5
  • activityBar.background#ddd6c1
  • activityBar.foreground#393733
  • activityBar.inactiveForeground#b7ae8f
  • activityBarBadge.background#b78d12
  • button.background#b78d12
  • button.foreground#ffffff
  • button.hoverBackground#d6a01d
  • editor.background#fffae8
  • editor.findMatchBackground#ff003366
  • editor.findMatchBorder#00539766
  • editor.findMatchHighlightBackground#2480672f
  • editor.foreground#222222
  • editor.lineHighlightBackground#ebe1c6
  • editor.selectionBackground#dcebd1
  • editor.selectionHighlightBackground#0077FF2f
  • editor.wordHighlightStrongBorder#0077FF34
  • editorBracketHighlight.foreground1#ff0033
  • editorBracketHighlight.foreground2#0033ff
  • editorBracketHighlight.foreground3#ed3333
  • editorBracketHighlight.foreground4#0077FF
  • editorBracketHighlight.foreground5#ff23ab
  • editorBracketHighlight.foreground6#9900ff
  • editorCursor.foreground#253d24
  • editorGroup.dropBackground#207f4c30
  • editorGroupHeader.tabsBackground#eee8d5
  • editorIndentGuide.background#f7f2e4
  • editorWhitespace.foreground#CAD0D3
  • editorWidget.background#eee8d5
  • editorWidget.border#207f4c30
  • focusBorder#48b2b6
  • list.activeSelectionBackground#ddc871
  • list.activeSelectionForeground#1f2623
  • list.filterMatchBorder#0077FF
  • list.focusBackground#dfca8866
  • list.highlightForeground#b78d12
  • list.hoverBackground#dfca8844
  • list.hoverForeground#333333
  • list.inactiveSelectionBackground#d6cdb0
  • list.inactiveSelectionForeground#223e36
  • panel.border#ddd6c1
  • sash.hoverBorder#1ba784
  • scrollbar.shadow#aaaaaa99
  • sideBar.background#eee8d5
  • sideBarTitle.foreground#555555
  • statusBar.background#eee8d5
  • statusBar.debuggingBackground#207f4c
  • statusBar.debuggingForeground#fffbe8
  • statusBar.foreground#555555
  • statusBar.noFolderBackground#eee8d5
  • statusBarItem.activeBackground#ded0a0
  • statusBarItem.hoverBackground#eae0c0
  • statusBarItem.prominentBackground#ddd6c1
  • tab.activeBackground#fffbe8
  • tab.activeModifiedBorder#1ba784
  • tab.border#eee8d5
  • tab.hoverForeground#111111
  • tab.inactiveBackground#e0d8c2
  • tab.inactiveForeground#595959
  • tab.inactiveModifiedBorder#1ba784
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#eee8d5
  • terminal.ansiBrightBlack#6c7680
  • terminal.ansiBrightBlue#55b4d4
  • terminal.ansiBrightCyan#39cbcc
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#fe76ff
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ff9940
  • terminal.ansiCyan#207f4c
  • terminal.ansiGreen#43b244
  • terminal.ansiMagenta#a37acc
  • terminal.ansiRed#f51818
  • terminal.ansiWhite#6c7880
  • terminal.ansiYellow#f2ae49
  • terminal.background#eee8d5
  • terminal.foreground#383838
  • titleBar.activeBackground#eee8d5
  • widget.shadow#207f4c25

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.underlineunderline
markup.boldbold
markup.italicitalic
property#934b3cff
comment#b8b8b8
constant#864bff
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#2265adbold
entity.other.attribute-name#cb2d01ff
keyword#577909bold
keyword.control#d0104cbold
storage#DC1376bold
token.storage.js,token.storage.ts#DC1376bold
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#14909D
string, entity.other.inherited-class#14909D
Number#9f1bf1
#9f1bf1
support#3c7a03ff
variable#20814D
variable.parameter#ca7300
keyword.operator#0f95b0
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#2598da
invalid.deprecated#cb2d01
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#b18534
support.class, entity.name.type.class#b18534
entity.name.class.identifier.namespace.type#b18534
entity.name.class#4090f3
entity.name.type#b18534
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#cf8f3bbold
support.constant.color.w3c-standard-color-name.css,entity.other.attribute-name.class.css#cf8f3bbold
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#b18534
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#126bb2
support.constant.json.js,support.constant.json.ts#cf8f3b
keyword.operator.expression.instanceof.js,keyword.operator.expression.instanceof.ts#577909
keyword.operator.expression.typeof.js,keyword.operator.expression.typeof.ts#577909
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#1D79EC
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#41aeb6
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