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#3d5945
  • activityBar.background#313f2b
  • activityBar.foreground#b5e2bf
  • activityBar.inactiveForeground#78917e
  • activityBarBadge.background#3ba776
  • activityBarBadge.foreground#102017
  • button.background#3b9b68
  • button.foreground#f2fff5
  • button.hoverBackground#4db47b
  • chat.background#1f2b23
  • chat.editedFileForeground#e0b36d
  • chat.requestBubbleBackground#2b362c
  • chat.requestBubbleHoverBackground#344737
  • chat.slashCommandBackground#3b806055
  • chat.slashCommandForeground#a5ddb0
  • checkbox.background#2b362c
  • checkbox.border#5d9771
  • checkbox.foreground#a5ddb0
  • dropdown.background#1f2b23
  • dropdown.border#526653
  • dropdown.foreground#d8e2d9
  • dropdown.listBackground#1f2b23
  • editor.background#232720
  • editor.findMatchBackground#a36b4066
  • editor.findMatchBorder#d6a86b99
  • editor.findMatchHighlightBackground#3ba77645
  • editor.foreground#e0e4da
  • editor.lineHighlightBackground#30382d
  • editor.selectionBackground#45624b
  • editor.selectionHighlightBackground#3ba77635
  • editor.wordHighlightStrongBorder#74b9a080
  • editorBracketHighlight.foreground1#ff5349
  • editorBracketHighlight.foreground2#5ba3ff
  • editorBracketHighlight.foreground3#66d98a
  • editorBracketHighlight.foreground4#ed8bd5
  • editorBracketHighlight.foreground5#6ecbff
  • editorBracketHighlight.foreground6#b8d968
  • editorCursor.foreground#b8e8c2
  • editorGroup.dropBackground#3ba77635
  • editorGroupHeader.tabsBackground#313f2b
  • editorGutter.addedBackground#3b9b62
  • editorGutter.deletedBackground#c84f4f
  • editorGutter.modifiedBackground#4b8fc4
  • editorIndentGuide.background#3d4d3d
  • editorInlayHint.background#38544299
  • editorInlayHint.foreground#a9c6af
  • editorStickyScroll.background#232720
  • editorStickyScroll.border#526653
  • editorStickyScroll.shadow#00000055
  • editorStickyScrollHover.background#2b362c
  • editorWhitespace.foreground#667461
  • editorWidget.background#313f2b
  • editorWidget.border#526653
  • focusBorder#55b88a
  • gitDecoration.addedResourceForeground#70c98b
  • gitDecoration.conflictingResourceForeground#e18ab4
  • gitDecoration.deletedResourceForeground#ed7777
  • gitDecoration.ignoredResourceForeground#718579
  • gitDecoration.modifiedResourceForeground#d6a86b
  • gitDecoration.untrackedResourceForeground#70bda0
  • inlineChat.background#1f2b23
  • inlineChat.border#5d9771
  • inlineChat.foreground#d8e2d9
  • inputValidation.errorBackground#49282b
  • inputValidation.errorBorder#ed7777
  • inputValidation.errorForeground#ffc0c0
  • inputValidation.infoBackground#203b4a
  • inputValidation.infoBorder#5b9bc2
  • inputValidation.infoForeground#b5dcf2
  • inputValidation.warningBackground#493a20
  • inputValidation.warningBorder#d6a86b
  • inputValidation.warningForeground#f3d99f
  • list.activeSelectionBackground#41654d
  • list.activeSelectionForeground#f0f7f0
  • list.filterMatchBorder#6bc99a
  • list.focusBackground#365443
  • list.highlightForeground#9fe0b2
  • list.hoverBackground#304a3a
  • list.hoverForeground#e5f0e7
  • list.inactiveSelectionBackground#344737
  • list.inactiveSelectionForeground#b9cbbd
  • minimap.background#232720
  • minimap.findMatchHighlight#a87932
  • minimap.selectionHighlight#527d61
  • notebook.cellBorderColor#466653
  • notebook.focusedCellBorder#64b97f
  • notebook.focusedRowBorder#5d9771
  • notebook.selectedCellBackground#355b7a50
  • panel.background#313f2b
  • panel.border#526653
  • panelTitle.activeForeground#a0d490
  • panelTitle.inactiveForeground#c4c8be
  • peekView.background#1f2b23
  • peekView.border#5d9771
  • peekViewEditor.background#232720
  • peekViewResult.background#2b362c
  • peekViewResult.fileForeground#9bd5a8
  • peekViewResult.lineForeground#a9c6af
  • sash.hoverBorder#3ba776
  • scrollbar.shadow#00000066
  • sideBar.background#313f2b
  • sideBar.foreground#c4c8be
  • sideBarTitle.foreground#a0d490
  • statusBar.background#313f2b
  • statusBar.debuggingBackground#2c8c5a
  • statusBar.debuggingForeground#f0ffe9
  • statusBar.foreground#c4c8be
  • statusBar.noFolderBackground#313f2b
  • statusBarItem.activeBackground#3d5945
  • statusBarItem.hoverBackground#344737
  • statusBarItem.prominentBackground#304a3a
  • tab.activeBackground#232720
  • tab.activeModifiedBorder#72d19d
  • tab.border#3d4d3d
  • tab.hoverForeground#f0f7f0
  • tab.inactiveBackground#20261d
  • tab.inactiveForeground#91a699
  • tab.inactiveModifiedBorder#55b88a
  • terminal.ansiBlack#191d17
  • terminal.ansiBlue#5ba3ff
  • terminal.ansiBrightBlack#718579
  • terminal.ansiBrightBlue#7dd1ff
  • terminal.ansiBrightCyan#86e4df
  • terminal.ansiBrightGreen#a9e66d
  • terminal.ansiBrightMagenta#f09be9
  • terminal.ansiBrightRed#ff9292
  • terminal.ansiBrightWhite#f0f7f0
  • terminal.ansiBrightYellow#ffd083
  • terminal.ansiCyan#55c9b8
  • terminal.ansiGreen#66c878
  • terminal.ansiMagenta#c394e8
  • terminal.ansiRed#ef6f6f
  • terminal.ansiWhite#c2d5c7
  • terminal.ansiYellow#e8b968
  • terminal.background#232720
  • terminal.foreground#d8e2d9
  • titleBar.activeBackground#313f2b
  • 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—