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.underline—underline
markup.bold—bold
markup.italic—italic
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—
Doli Theme by LQYld - VS Code Theme