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.background#ccc7bd
  • activityBar.foreground#28251f
  • activityBarBadge.background#ad7400
  • activityBarBadge.foreground#28251f
  • badge.background#ad7400
  • badge.foreground#28251f
  • button.background#b28733
  • button.foreground#000000
  • button.hoverBackground#9f7830
  • diffEditor.insertedTextBackground#ff7f6433
  • dropdown.background#cac4ba
  • dropdown.border#e7e5e0
  • editor.background#d7d3cb
  • editor.findMatchHighlightBackground#ad74003D
  • editor.foreground#544d40
  • editor.lineHighlightBackground#6644000A
  • editor.selectionBackground#c1bbae
  • editorCursor.foreground#ad7400
  • editorGroup.background#dedad4
  • editorGroup.border#e7e5e0
  • editorGroupHeader.tabsBackground#dedad4
  • editorHoverWidget.background#dedad4
  • editorHoverWidget.border#e7e5e0
  • editorIndentGuide.activeBackground#9d988d
  • editorIndentGuide.background#544d4026
  • editorLineNumber.activeForeground#544d40
  • editorLineNumber.foreground#9c927c
  • editorRuler.foreground#544d4026
  • editorSuggestWidget.background#dedad4
  • editorSuggestWidget.border#e7e5e0
  • editorSuggestWidget.selectedBackground#d3cec5
  • editorWhitespace.foreground#544d4026
  • editorWidget.background#dedad4
  • editorWidget.border#c5c0b4
  • extensionButton.prominentBackground#d45ebc
  • extensionButton.prominentHoverBackground#c850b1
  • focusBorder#ad7400
  • input.background#e4e2dc
  • input.border#e7e5e0
  • list.activeSelectionBackground#d3cec5
  • list.activeSelectionForeground#28251f
  • list.focusBackground#d3cec5
  • list.highlightForeground#28251f
  • list.hoverBackground#d3cec566
  • list.inactiveSelectionBackground#d3cec5
  • list.inactiveSelectionForeground#28251f
  • notification.background#dedad4
  • peekView.border#ad7400
  • peekViewEditor.background#e4e2dc
  • peekViewResult.background#dedad4
  • peekViewResult.selectionBackground#d3cec5
  • peekViewTitle.background#e4e2dc
  • pickerGroup.border#ad7400
  • scrollbarSlider.activeBackground#8b826e80
  • scrollbarSlider.background#b1a99980
  • scrollbarSlider.hoverBackground#a59c8a80
  • sideBar.background#dedad4
  • sideBarSectionHeader.background#ccc7bd
  • statusBar.background#dedad4
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#625a4b
  • statusBar.noFolderBackground#dedad4
  • statusBarItem.hoverBackground#d3cec5
  • tab.activeBackground#d7d3cb
  • tab.activeForeground#28251f
  • tab.border#e7e5e0
  • tab.inactiveBackground#dedad4
  • titleBar.activeBackground#dedad4
  • titleBar.activeForeground#625a4b
  • titleBar.inactiveBackground#dedad4
  • titleBar.inactiveForeground#625a4b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#a39c8fitalic
comment markup.link#a39c8f
entity.name.type#1a3f84
entity.other.inherited-class#1a3f84
keyword#398722
keyword.control#398722
keyword.operator#398722
keyword.other.special-method#9e5010
keyword.other.unit#2e6599
storage#398722
storage.type.annotation, storage.type.primitive#398722
storage.modifier.package, storage.modifier.import#544d40
constant#2e6599
constant.variable#2e6599
constant.character.escape#a9493d
constant.numeric#2e6599
constant.other.color#a9493d
constant.other.symbol#a9493d
variable#1f938a
variable.interpolation#41afb9
variable.parameter#544d40
string#673c86
string > source, string embedded#544d40
string.regexp#a9493d
string.regexp source.ruby.embedded#1a3f84
string.other.link#1f938a
punctuation.definition.comment#a39c8f
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#544d40
punctuation.definition.heading, punctuation.definition.identity#9e5010
punctuation.definition.bold#1a3f84bold
punctuation.definition.italic#398722italic
punctuation.section.embedded#41afb9
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#544d40
support.class#1a3f84
support.type#a9493d
support.function#a9493d
support.function.any-method#9e5010
entity.name.function#9e5010
entity.name.class, entity.name.type.class#1a3f84
entity.name.section#9e5010
entity.name.tag#1f938a
entity.other.attribute-name#2e6599
entity.other.attribute-name.id#9e5010
meta.class#1a3f84
meta.class.body#544d40
meta.method-call, meta.method#544d40
meta.definition.variable#1f938a
meta.link#2e6599
meta.require#9e5010
meta.selector#398722
meta.separator#544d40
meta.tag#544d40
underline
none#544d40
invalid.deprecated#adc2eb
invalid.illegal#000000
markup.bold#2e6599bold
markup.changed#398722
markup.deleted#1f938a
markup.italic#398722italic
markup.heading#1f938a
markup.heading punctuation.definition.heading#9e5010
markup.link#a9493d
markup.inserted#673c86
markup.quote#2e6599
markup.raw#673c86
source.c keyword.operator#398722
source.cpp keyword.operator#398722
source.cs keyword.operator#398722
source.css property-name, source.css property-value#7d7668
source.css property-name.support, source.css property-value.support#544d40
source.elixir source.embedded.source#544d40
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#9e5010
source.elixir variable.definition, source.elixir variable.anonymous#398722
source.elixir parameter.variable.function#2e6599italic
source.elixir quoted#673c86
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#1f938a
source.elixir readwrite.module punctuation#1f938a
source.elixir regexp.section, source.elixir regexp.string#41afb9
source.elixir separator, source.elixir keyword.operator#2e6599
source.elixir variable.constant#1a3f84
source.elixir array, source.elixir scope, source.elixir section#7d7668
source.gfm markup
source.gfm link entity#9e5010
source.go storage.type.string#398722
source.ini keyword.other.definition.ini#1f938a
source.java storage.modifier.import#1a3f84
source.java storage.type#1a3f84
source.java keyword.operator.instanceof#398722
source.java-properties meta.key-pair#1f938a
source.java-properties meta.key-pair > punctuation#544d40
source.js keyword.operator#a9493d
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#398722
source.ts keyword.operator#a9493d
source.flow keyword.operator#a9493d
source.json meta.structure.dictionary.json > string.quoted.json#1f938a
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#1f938a
source.json meta.structure.dictionary.json > value.json > string.quoted.json, source.json meta.structure.array.json > value.json > string.quoted.json, source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation, source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#673c86
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#a9493d
ng.interpolation#1f938a
ng.interpolation.begin, ng.interpolation.end#9e5010
ng.interpolation function#1f938a
ng.interpolation function.begin, ng.interpolation function.end#9e5010
ng.interpolation bool#2e6599
ng.interpolation bracket#544d40
ng.pipe, ng.operator#544d40
ng.tag#a9493d
ng.attribute-with-value attribute-name#1a3f84
ng.attribute-with-value string#398722
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#544d40
source.ruby constant.other.symbol > punctuationinherit
source.php class.bracket#544d40
source.python keyword.operator.logical.python#398722
source.python variable.parameter#2e6599
customrule#544d40
support.type.property-name#544d40
string.quoted.double punctuation#673c86
support.constant#2e6599
support.type.property-name.json#1f938a
support.type.property-name.json punctuation#1f938a
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#a9493d
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#a9493d
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#544d40
support.variable.dom.js, support.variable.dom.ts#1f938a
support.variable.property.dom.js, support.variable.property.dom.ts#1f938a
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#41afb9
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#544d40
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#544d40
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#544d40
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#1f938a
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#1f938a
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#398722
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#398722
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#544d40
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#544d40
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#544d40
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#2e6599
source.js support.variable, source.ts support.variable, source.tsx support.variable#1f938a
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#2e6599
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#398722
source.ts keyword.operator, source.tsx keyword.operator#a9493d
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #544d40
constant.language.import-export-all.js, constant.language.import-export-all.ts#1f938a
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#a9493d
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#544d40
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#1f938a
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#2e6599
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#1f938a
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#673c86
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#544d40
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#673c86
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#544d40
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#544d40
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#544d40
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#544d40
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#544d40
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#1a3f84
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#1f938a
constant.language.json#a9493d
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#2e6599
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#a9493d
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#673c86
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#673c86
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#398722
variable.other.object.js, variable.other.object.ts#544d40
meta.object-literal.key.js, meta.object-literal.key.ts#1f938a
source.python constant.other#544d40
source.python constant#2e6599
constant.character.format.placeholder.other.python storage#2e6599
support.variable.magic.python#1f938a
meta.function.parameters.python#2e6599
punctuation.separator.annotation.python#544d40
punctuation.separator.parameters.python#544d40
entity.name.variable.field.cs#1f938a
source.cs keyword.operator#544d40
variable.other.readwrite.cs#544d40
variable.other.object.cs#544d40
variable.other.object.property.cs#544d40
entity.name.variable.property.cs#9e5010
storage.type.cs#1a3f84
keyword.other.unsafe.rust#398722
entity.name.type.rust#a9493d
storage.modifier.lifetime.rust#544d40
entity.name.lifetime.rust#2e6599
storage.type.core.rust#a9493d
meta.attribute.rust#2e6599
storage.class.std.rust#a9493d
markup.raw.block.markdown#544d40
punctuation.definition.variable.shell#1f938a
support.constant.property-value.css#544d40
punctuation.definition.constant.css#2e6599
punctuation.separator.key-value.scss#1f938a
punctuation.definition.constant.scss#2e6599
meta.property-list.scss punctuation.separator.key-value.scss#544d40
storage.type.primitive.array.java#1a3f84
entity.name.section.markdown#1f938a
punctuation.definition.heading.markdown#1f938a
markup.heading.setext#544d40
punctuation.definition.bold.markdown#2e6599
markup.inline.raw.markdown#673c86
beginning.punctuation.definition.list.markdown#1f938a
markup.quote.markdown#a39c8fitalic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#544d40
punctuation.definition.metadata.markdown#398722
markup.underline.link.markdown, markup.underline.link.image.markdown#398722
string.other.link.title.markdown, string.other.link.description.markdown#9e5010
punctuation.separator.variable.ruby#1f938a
variable.other.constant.ruby#2e6599
keyword.operator.other.ruby#673c86
punctuation.definition.variable.php#1f938a
meta.class.php#544d40