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#4a5446
  • activityBar.background#373d35
  • activityBar.foreground#c8c6c3
  • activityBar.inactiveForeground#becab8
  • activityBarBadge.background#a0d490
  • activityBarBadge.foreground#1b1c1a
  • button.background#5d6b4e
  • button.foreground#e0e4da
  • button.hoverBackground#7b8b6a
  • chat.background#373d35
  • chat.editedFileForeground#e4c382
  • chat.requestBubbleBackground#3a4037
  • chat.requestBubbleHoverBackground#43493b
  • chat.slashCommandBackground#5d6b4e5c
  • chat.slashCommandForeground#a0d490
  • checkbox.background#3a4037
  • checkbox.border#4a5244
  • checkbox.foreground#a0d490
  • dropdown.background#373d35
  • dropdown.border#4a5244
  • dropdown.foreground#e0e4da
  • dropdown.listBackground#373d35
  • editor.background#252624
  • editor.findMatchBackground#e4c3824d
  • editor.findMatchBorder#e4c38299
  • editor.findMatchHighlightBackground#a0d49033
  • editor.foreground#e0e4da
  • editor.lineHighlightBackground#2d2f2b
  • editor.selectionBackground#4a5446
  • editor.selectionHighlightBackground#a0d4902e
  • editor.wordHighlightStrongBorder#a0d49066
  • editorBracketHighlight.foreground1#ff5449
  • editorBracketHighlight.foreground2#7cacf8
  • editorBracketHighlight.foreground3#a0d490
  • editorBracketHighlight.foreground4#e4c382
  • editorBracketHighlight.foreground5#87b2bd
  • editorBracketHighlight.foreground6#b8c47f
  • editorCursor.foreground#e0e4da
  • editorGroup.dropBackground#a0d49033
  • editorGroupHeader.tabsBackground#373d35
  • editorGutter.addedBackground#a0d490
  • editorGutter.deletedBackground#ff5449
  • editorGutter.modifiedBackground#7cacf8
  • editorIndentGuide.background#43493b
  • editorInlayHint.background#3a4037b3
  • editorInlayHint.foreground#becab8
  • editorStickyScroll.background#373d35
  • editorStickyScroll.border#4a5244
  • editorStickyScroll.shadow#00000055
  • editorStickyScrollHover.background#3a4037
  • editorWhitespace.foreground#5a6050
  • editorWidget.background#373d35
  • editorWidget.border#4a5244
  • focusBorder#a0d490
  • gitDecoration.addedResourceForeground#a0d490
  • gitDecoration.conflictingResourceForeground#c194c9
  • gitDecoration.deletedResourceForeground#ff5449
  • gitDecoration.ignoredResourceForeground#6b7161
  • gitDecoration.modifiedResourceForeground#e4c382
  • gitDecoration.untrackedResourceForeground#b8c47f
  • inlineChat.background#373d35
  • inlineChat.border#4a5244
  • inlineChat.foreground#e0e4da
  • inputValidation.errorBackground#4b2d2b
  • inputValidation.errorBorder#ff5449
  • inputValidation.errorForeground#ffd7d5
  • inputValidation.infoBackground#1f3136
  • inputValidation.infoBorder#5dd5fb
  • inputValidation.infoForeground#d6ecf4
  • inputValidation.warningBackground#4a3a22
  • inputValidation.warningBorder#e4c382
  • inputValidation.warningForeground#f0dfa4
  • list.activeSelectionBackground#4a5446
  • list.activeSelectionForeground#e0e4da
  • list.filterMatchBorder#a0d490
  • list.focusBackground#3a4037
  • list.highlightForeground#a0d490
  • list.hoverBackground#3a4037
  • list.hoverForeground#e0e4da
  • list.inactiveSelectionBackground#333934
  • list.inactiveSelectionForeground#c8c6c3
  • minimap.background#252624
  • minimap.findMatchHighlight#e4c382
  • minimap.selectionHighlight#4a5446
  • notebook.cellBorderColor#4a5244
  • notebook.focusedCellBorder#a0d490
  • notebook.focusedRowBorder#a0d490
  • notebook.selectedCellBackground#4a544666
  • panel.background#373d35
  • panel.border#4a5244
  • panelTitle.activeForeground#a0d490
  • panelTitle.inactiveForeground#becab8
  • peekView.background#373d35
  • peekView.border#4a5244
  • peekViewEditor.background#373d35
  • peekViewResult.background#3a4037
  • peekViewResult.fileForeground#c8c6c3
  • peekViewResult.lineForeground#becab8
  • sash.hoverBorder#a0d490
  • scrollbar.shadow#00000066
  • sideBar.background#373d35
  • sideBar.foreground#c8c6c3
  • sideBarTitle.foreground#a0d490
  • statusBar.background#373d35
  • statusBar.debuggingBackground#5d6b4e
  • statusBar.debuggingForeground#e0e4da
  • statusBar.foreground#becab8
  • statusBar.noFolderBackground#373d35
  • statusBarItem.activeBackground#4a5446
  • statusBarItem.hoverBackground#3a4037
  • statusBarItem.prominentBackground#3a4037
  • tab.activeBackground#252624
  • tab.activeModifiedBorder#a0d490
  • tab.border#3c4237
  • tab.hoverForeground#e0e4da
  • tab.inactiveBackground#232522
  • tab.inactiveForeground#becab8
  • tab.inactiveModifiedBorder#a0d490
  • terminal.ansiBlack#1b1c1a
  • terminal.ansiBlue#7cacf8
  • terminal.ansiBrightBlack#6b7161
  • terminal.ansiBrightBlue#5dd5fb
  • terminal.ansiBrightCyan#5dd5fb
  • terminal.ansiBrightGreen#a0d490
  • terminal.ansiBrightMagenta#c9a0cf
  • terminal.ansiBrightRed#ff8a80
  • terminal.ansiBrightWhite#e0e4da
  • terminal.ansiBrightYellow#e4c382
  • terminal.ansiCyan#87b2bd
  • terminal.ansiGreen#a0d490
  • terminal.ansiMagenta#c194c9
  • terminal.ansiRed#ff5449
  • terminal.ansiWhite#c8c6c3
  • terminal.ansiYellow#e4c382
  • terminal.background#252624
  • terminal.foreground#e0e4da
  • titleBar.activeBackground#373d35
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9da299italic
constant, constant.other#ae8252—
constant.numeric, constant.language#c394e8—
entity.name.function, support.function, meta.function-call#a0d490—
support.type, entity.name.type#71a562—
storage.type#c57636—
support.class, entity.name.type.class, entity.name.type.namespace, entity.name.class, entity.name.class.identifier.namespace.type#87b2bd—
keyword, storage, keyword.control, keyword.operator#d7945ebold
string, punctuation.definition.string, markup.inline.raw#f07171—
variable, variable.other.property#edf0d2—
variable.parameter#e4c382—
variable.language#5ba3ffbold
entity.name.tag, entity.other.attribute-name, markup.heading, markup.bold, markup.italic#f3c69b—
meta.embedded, source.php, text.html.php#e0e4da—
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#7cacf8—
entity.other.attribute-name.html#a8c7fa—
string.quoted.double.html, string.quoted.single.html#fe8d59—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#7cacf8—
entity.other.attribute-name.html[href], entity.other.attribute-name.html[src]#a0d490—
support.type.vendored.property-name.css, meta.property-name.css#5dd5fb—
meta.property-value.css, support.constant.property-value.css#e0e4da—
variable.other.readwrite.js, support.variable.property.js, support.variable.object.process.js, variable.other.readwrite.ts, support.variable.property.ts#8cc27e—
meta.object-literal.key.js, meta.object-literal.key.ts#8cc27e—
support.type.object.console.js, support.type.object.console.ts, support.variable.dom.js, support.variable.property.dom.js, support.variable.dom.ts, support.variable.property.dom.ts#8cc27e—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#8cc27e—
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts#8cc27e—
var.this.js, var.this.ts, variable.language.this.js, variable.language.this.ts#5ba3ffbold
text.html.markdown, meta.paragraph.markdown, markup.paragraph.markdown, punctuation.definition.list.markdown#e0e4da—
markup.heading, markup.heading entity.name, markup.heading.markdown, entity.name.section.markdown, punctuation.definition.heading.markdown#e4c382bold
markup.list, markup.quote, markup.italic, markup.bold, markup.underline, markup.link, markup.raw#b8c47f—
markup.quote#86b875—
comment, punctuation.definition.comment#9da299italic
constant, constant.other#ae8252—
constant.numeric, constant.language#c394e8—
entity.name.function, support.function, meta.function-call#a0d490—
support.type, entity.name.type#71a562—
storage.type#c57636—
support.class, entity.name.type.class, entity.name.type.namespace, entity.name.class, entity.name.class.identifier.namespace.type#87b2bd—
keyword, storage, keyword.control, keyword.operator#d7945ebold
string, punctuation.definition.string, markup.inline.raw#f07171—
variable, variable.other.property#edf0d2—
variable.parameter#e4c382—
variable.language#5ba3ffbold
entity.name.tag, entity.other.attribute-name, markup.heading, markup.bold, markup.italic#f3c69b—
meta.embedded, source.php, text.html.php#e0e4da—
entity.name.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#7cacf8—
entity.other.attribute-name.html#a8c7fa—
string.quoted.double.html, string.quoted.single.html#fe8d59—
punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.separator.key-value.html#7cacf8—
entity.other.attribute-name.html[href], entity.other.attribute-name.html[src]#a0d490—
support.type.vendored.property-name.css, meta.property-name.css#5dd5fb—
meta.property-value.css, support.constant.property-value.css#e0e4da—
variable.other.readwrite.js, support.variable.property.js, support.variable.object.process.js, variable.other.readwrite.ts, support.variable.property.ts#8cc27e—
meta.object-literal.key.js, meta.object-literal.key.ts#8cc27e—
support.type.object.console.js, support.type.object.console.ts, support.variable.dom.js, support.variable.property.dom.js, support.variable.dom.ts, support.variable.property.dom.ts#8cc27e—
punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#8cc27e—
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts#8cc27e—
var.this.js, var.this.ts, variable.language.this.js, variable.language.this.ts#5ba3ffbold
text.html.markdown, meta.paragraph.markdown, markup.paragraph.markdown, punctuation.definition.list.markdown#e0e4da—
markup.heading, markup.heading entity.name, markup.heading.markdown, entity.name.section.markdown, punctuation.definition.heading.markdown#e4c382bold
markup.list, markup.quote, markup.italic, markup.bold, markup.underline, markup.link, markup.raw#b8c47f—
markup.quote#86b875—
hyperlink#0d1171ff—
markup.underline—underline
markup.bold—bold
markup.italic—italic
property#934b3cff—
comment#989898italic
comment.line.number-sign#484848italic bold
comment.block.documentation#9da298italic
constant#160c2abold
constant.other.placeholder.py#7b0000ff—
variable—bold
entity#cc3611ff—
entity.name.type#6c65b0ff—
entity.other.inherited-class#000000ff—
entity.name.function#000—
entity.name.function.argument#a28d00ff—
entity.name.tag#2265adbold
entity.other.attribute-name#cb2d01ff—
keyword#762625bold
keyword.control#A9312Fbold
storage#8f200fbold
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#e10000—
string, entity.other.inherited-class#e10000—
constant.numeric#9f1bf1—
constant.language#9f1bf1—
support#3c7a03ff—
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—
support.function#50001d—
support.constant#702d00—
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—
entity.name.tag.html#881280
entity.other.attribute-name.html#994500—
string.quoted.double.html#1A1AA8—
punctuation.definition.tag,punctuation.definition.string#881280—
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,support.variable.property.js,support.variable.object.process.js,variable.other.readwrite.ts,support.variable.property.ts,support.variable.object.process.ts#006600
meta.object-literal.key.js,meta.object-literal.key.ts#3C7A03—
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—
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#1c36b7bold
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#b03a3a—
markup.inserted#2e7d4f—
markup.changed#9a6a00—