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.activeBorder#54533380
  • activityBar.background#fdfbd4
  • activityBar.border#fdfbd4
  • activityBar.foreground#878672
  • activityBar.inactiveForeground#54533390
  • activityBarBadge.background#8786720
  • activityBarBadge.foreground#fdfbd4
  • badge.background#8786720
  • badge.foreground#d9d7b6
  • button.background#8786720
  • button.foreground#fdfbd4
  • button.hoverBackground#878672090
  • button.secondaryBackground#878672090
  • button.secondaryForeground#d9d7b6
  • button.secondaryHoverBackground#878672080
  • debugConsoleInputIcon.foreground#8786720
  • debugExceptionWidget.background#d9d7b6
  • debugExceptionWidget.border#878672
  • debugIcon.breakpointDisabledForeground#8786720
  • debugIcon.breakpointForeground#8786720
  • debugToolBar.background#d9d7b6
  • descriptionForeground#545333
  • diffEditor.diagonalFill#878672
  • diffEditor.insertedTextBackground#24630585
  • diffEditor.removedTextBackground#c22d3e85
  • disabledForeground#54533370
  • dropdown.background#d9d7b6
  • dropdown.border#545333
  • dropdown.foreground#545333
  • editor.background#fdfbd4
  • editor.findMatchBackground#878672
  • editor.findMatchBorder#878672
  • editor.findMatchHighlightBackground#87867285
  • editor.findMatchHighlightBorder#878672
  • editor.findRangeHighlightBackground#87867285
  • editor.foreground#545333
  • editor.inactiveSelectionBackground#54533385
  • editor.lineHighlightBackground#d9d7b6
  • editor.rangeHighlightBackground#87867285
  • editor.selectionBackground#87867220
  • editor.selectionForeground#fdfbd4
  • editor.selectionHighlightBackground#60606090
  • editor.selectionHighlightBorder#246305
  • editor.snippetTabstopHighlightBackground#545333
  • editor.wordHighlightBackground#87867285
  • editor.wordHighlightBorder#878672
  • editor.wordHighlightStrongBackground#24630585
  • editor.wordHighlightStrongBorder#246305
  • editorBracketHighlight.foreground1#545333
  • editorBracketHighlight.foreground2#545333
  • editorBracketHighlight.foreground3#545333
  • editorBracketHighlight.foreground4#545333
  • editorBracketHighlight.foreground5#545333
  • editorBracketHighlight.foreground6#545333
  • editorBracketMatch.background#878672
  • editorBracketMatch.border#878672
  • editorCodeLens.foreground#787b80
  • editorError.foreground#c22d3e
  • editorGhostText.background#d9d7b6
  • editorGhostText.foreground#545333
  • editorGroup.border#878672
  • editorGroupHeader.noTabsBackground#fdfbd4
  • editorGroupHeader.tabsBackground#fdfbd4
  • editorGroupHeader.tabsBorder#fdfbd4
  • editorGutter.addedBackground#246305
  • editorGutter.deletedBackground#8786720
  • editorGutter.modifiedBackground#878672
  • editorHoverWidget.background#d9d7b6
  • editorHoverWidget.border#878672
  • editorLineNumber.activeForeground#54533390
  • editorLineNumber.foreground#878672
  • editorLink.activeForeground#54533390
  • editorMarkerNavigation.background#d9d7b6
  • editorOverviewRuler.addedForeground#246305
  • editorOverviewRuler.border#878672
  • editorOverviewRuler.bracketMatchForeground#878672
  • editorOverviewRuler.deletedForeground#c22d3e
  • editorOverviewRuler.errorForeground#c22d3e
  • editorOverviewRuler.findMatchForeground#87867285
  • editorOverviewRuler.modifiedForeground#878672
  • editorOverviewRuler.warningForeground#8786720
  • editorOverviewRuler.wordHighlightForeground#87867285
  • editorOverviewRuler.wordHighlightStrongForeground#24630585
  • editorRuler.foreground#878672
  • editorSuggestWidget.background#d9d7b6
  • editorSuggestWidget.border#878672
  • editorSuggestWidget.highlightForeground#8786720
  • editorSuggestWidget.selectedBackground#878672
  • editorWarning.foreground#8786720
  • editorWhitespace.foreground#54533330
  • editorWidget.background#d9d7b6
  • editorWidget.border#878672
  • errorForeground#c22d3e
  • extensionButton.prominentBackground#8786720
  • extensionButton.prominentForeground#d9d7b6
  • extensionButton.prominentHoverBackground#8786720
  • focusBorder#8786720
  • foreground#545333
  • gitDecoration.conflictingResourceForeground#c22d3e85
  • gitDecoration.deletedResourceForeground#c22d3e
  • gitDecoration.ignoredResourceForeground#54533370
  • gitDecoration.modifiedResourceForeground#878672
  • gitDecoration.submoduleResourceForeground#878672
  • gitDecoration.untrackedResourceForeground#246305
  • icon.foreground#545333
  • input.background#d9d7b6
  • input.border#545333
  • input.foreground#878672
  • input.placeholderForeground#545333
  • inputOption.activeBackground#8786720
  • inputOption.activeBorder#8786720
  • inputOption.activeForeground#54533390
  • inputValidation.errorBackground#d9d7b6
  • inputValidation.errorBorder#c22d3e
  • inputValidation.infoBackground#fdfbd4
  • inputValidation.infoBorder#878672
  • inputValidation.warningBackground#fdfbd4
  • inputValidation.warningBorder#8786720
  • keybindingLabel.background#d9d7b6
  • keybindingLabel.border#878672
  • keybindingLabel.bottomBorder#878672
  • keybindingLabel.foreground#878672
  • list.activeSelectionBackground#87867285
  • list.activeSelectionForeground#878672
  • list.deemphasizedForeground#87867285
  • list.errorForeground#c22d3e
  • list.filterMatchBackground#87867285
  • list.filterMatchBorder#878672
  • list.focusBackground#87867285
  • list.focusForeground#878672
  • list.focusOutline#878672
  • list.highlightForeground#8786720
  • list.hoverBackground#87867285
  • list.inactiveSelectionBackground#87867285
  • list.inactiveSelectionForeground#878672
  • list.invalidItemForeground#878672
  • listFilterWidget.background#d9d7b6
  • listFilterWidget.noMatchesOutline#c22d3e
  • listFilterWidget.outline#8786720
  • menu.foreground#545333
  • minimap.background#fdfbd4
  • minimap.errorHighlight#c22d3e
  • minimap.findMatchHighlight#87867285
  • minimap.selectionHighlight#54533385
  • minimapGutter.addedBackground#246305
  • minimapGutter.deletedBackground#c22d3e
  • minimapGutter.modifiedBackground#878672
  • panel.background#fdfbd4
  • panel.border#878672
  • panelTitle.activeBorder#54533380
  • panelTitle.activeForeground#54533390
  • panelTitle.inactiveForeground#54533370
  • peekView.border#878672
  • peekViewEditor.background#d9d7b6
  • peekViewEditor.matchHighlightBackground#878672
  • peekViewEditor.matchHighlightBorder#878672
  • peekViewResult.background#d9d7b6
  • peekViewResult.fileForeground#878672
  • peekViewResult.lineForeground#878672
  • peekViewResult.matchHighlightBackground#878672
  • peekViewResult.selectionBackground#878672
  • peekViewTitle.background#878672
  • peekViewTitleDescription.foreground#878672
  • peekViewTitleLabel.foreground#878672
  • pickerGroup.border#878672
  • pickerGroup.foreground#878672
  • progressBar.background#8786720
  • scrollbar.shadow#878672
  • scrollbarSlider.activeBackground#878672
  • scrollbarSlider.background#878672
  • scrollbarSlider.hoverBackground#878672
  • selection.background#87867240
  • settings.headerForeground#878672
  • settings.modifiedItemIndicator#878672
  • sideBar.background#fdfbd4
  • sideBar.border#fdfbd4
  • sideBarSectionHeader.background#fdfbd4
  • sideBarSectionHeader.border#fdfbd4
  • sideBarSectionHeader.foreground#878672
  • sideBarTitle.foreground#878672
  • statusBar.background#fdfbd4
  • statusBar.border#fdfbd4
  • statusBar.debuggingBackground#8786720
  • statusBar.debuggingForeground#d9d7b6
  • statusBar.foreground#878672
  • statusBar.noFolderBackground#d9d7b6
  • statusBarItem.activeBackground#878672
  • statusBarItem.hoverBackground#878672
  • statusBarItem.prominentBackground#878672
  • statusBarItem.prominentHoverBackground#545333
  • statusBarItem.remoteBackground#8786720
  • statusBarItem.remoteForeground#d9d7b6
  • tab.activeBackground#fdfbd4
  • tab.activeBorder#54533380
  • tab.activeForeground#545333
  • tab.border#fdfbd4
  • tab.inactiveBackground#fdfbd4
  • tab.inactiveForeground#54533370
  • tab.unfocusedActiveBorder#54533380
  • tab.unfocusedActiveForeground#54533390
  • tab.unfocusedInactiveForeground#54533370
  • terminal.background#fdfbd4
  • terminal.foreground#545333
  • terminal.selectionBackground#604a38
  • terminal.selectionForeground#fdfbd4
  • textBlockQuote.background#d9d7b6
  • textLink.activeForeground#54533390
  • textLink.foreground#8786720
  • textPreformat.foreground#878672
  • titleBar.activeBackground#fdfbd4
  • titleBar.activeForeground#545333
  • titleBar.border#fdfbd4
  • titleBar.inactiveBackground#fdfbd4
  • titleBar.inactiveForeground#54533370
  • tree.indentGuidesStroke#878672
  • walkThrough.embeddedEditorBackground#d9d7b6
  • welcomePage.progress.background#878672
  • welcomePage.tileBackground#fdfbd4
  • widget.shadow#54533390

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#545333
variable.other.generic-type.haskell#545333
storage.type.haskell#545333
support.variable.magic.python#545333
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#545333
variable.parameter.function.language.special.self.python#545333
storage.modifier.lifetime.rust#545333
support.function.std.rust#545333
entity.name.lifetime.rust#545333
variable.language.rust#545333
support.constant.edge#545333
constant.other.character-class.regexp#545333
keyword.operator.quantifier.regexp#545333
punctuation.definition.string.begin,punctuation.definition.string.end#545333
variable.parameter.function#545333
comment markup.link#a8a8a8
markup.changed.diff#545333
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#545333
markup.inserted.diff#545333
markup.deleted.diff#545333
meta.function.c,meta.function.cpp#545333
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#545333
punctuation.separator.key-value#545333
keyword.operator.expression.import#545333
support.constant.math#545333
support.constant.property.math#545333
variable.other.constant#545333
storage.type.annotation.java, storage.type.object.array.java#545333
source.java#545333
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#545333
meta.method.java#545333
storage.modifier.import.java,storage.type.java,storage.type.generic.java#545333
keyword.operator.instanceof.java#545333
meta.definition.variable.name.java#545333
keyword.operator.logical#545333
keyword.operator.bitwise#545333
keyword.operator.channel#545333
support.constant.property-value.scss,support.constant.property-value.css#545333
keyword.operator.css,keyword.operator.scss,keyword.operator.less#545333
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#545333
punctuation.separator.list.comma.css#545333
support.constant.color.w3c-standard-color-name.css#545333
support.type.vendored.property-name.css#545333
support.module.node,support.type.object.module,support.module.node#545333
entity.name.type.module#545333
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#545333
support.constant.json#545333
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#545333
support.type.object.console#545333
support.variable.property.process#545333
entity.name.function,support.function.console#545333
keyword.operator.misc.rust#545333
keyword.operator.sigil.rust#545333
keyword.operator.delete#545333
support.type.object.dom#545333
support.variable.dom,support.variable.property.dom#545333
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#545333
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#545333
punctuation.separator.delimiter#545333
punctuation.separator.c,punctuation.separator.cpp#545333
support.type.posix-reserved.c,support.type.posix-reserved.cpp#545333
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#545333
variable.parameter.function.language.python#545333
support.type.python#545333
keyword.operator.logical.python#545333
variable.parameter.function.python#545333
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#545333
meta.function-call.generic.python#545333
constant.character.format.placeholder.other.python#545333
keyword.operator#545333
keyword.operator.assignment.compound#545333
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#545333
keyword#545333
entity.name.namespace#545333
variable#545333
variable.c#545333
variable.language#545333
token.variable.parameter.java#545333
import.storage.java#545333
token.package.keyword#545333
token.package#545333
entity.name.function, meta.require, support.function.any-method, variable.function#545333
entity.name.type.namespace#545333
support.class, entity.name.type.class#545333
entity.name.class.identifier.namespace.type#545333
entity.name.class, variable.other.class.js, variable.other.class.ts#545333
variable.other.class.php#545333
entity.name.type#545333
keyword.control#545333
control.elements, keyword.operator.less#545333
keyword.other.special-method#545333
storage#545333
token.storage#545333
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#545333
token.storage.type.java#545333
support.function#545333
support.type.property-name#545333
support.constant.property-value#545333
support.constant.font-name#545333
meta.tag#545333
string#545333
entity.other.inherited-class#545333
constant.other.symbol#545333
constant.numeric#545333
constant#545333
punctuation.definition.constant#545333
entity.name.tag#545333
entity.other.attribute-name#545333
entity.other.attribute-name.id#545333normal
entity.other.attribute-name.class.css#545333normal
meta.selector#545333
markup.heading#545333
markup.heading punctuation.definition.heading, entity.name.section#545333
keyword.other.unit#545333
markup.bold,todo.bold#545333
punctuation.definition.bold#545333
markup.italic, punctuation.definition.italic,todo.emphasis#545333
emphasis md#545333
entity.name.section.markdown#545333
punctuation.definition.heading.markdown#545333
punctuation.definition.list.begin.markdown#545333
markup.heading.setext#545333
punctuation.definition.bold.markdown#545333
markup.inline.raw.markdown#545333
markup.inline.raw.string.markdown#545333
punctuation.definition.list.markdown#545333
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#545333
beginning.punctuation.definition.list.markdown#545333
punctuation.definition.metadata.markdown#545333
markup.underline.link.markdown,markup.underline.link.image.markdown#545333
string.other.link.title.markdown,string.other.link.description.markdown#545333
string.regexp#545333
constant.character.escape#545333
punctuation.section.embedded, variable.interpolation#545333
punctuation.section.embedded.begin,punctuation.section.embedded.end#545333
invalid.illegal#efefef
invalid.illegal.bad-ampersand.html#545333
invalid.broken#efefef
invalid.deprecated#efefef
invalid.unimplemented#efefef
source.json meta.structure.dictionary.json > string.quoted.json#545333
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#545333
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#545333
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#545333
support.type.property-name.json#545333
support.type.property-name.json punctuation#545333
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#545333
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#545333
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#545333
keyword.operator.error-control.php#545333
keyword.operator.type.php#545333
punctuation.section.array.begin.php#545333
punctuation.section.array.end.php#545333
invalid.illegal.non-null-typehinted.php#545333
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#545333
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#545333
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#545333
support.constant.core.rust#545333
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#545333
entity.name.goto-label.php,support.other.php#545333
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#545333
keyword.operator.regexp.php#545333
keyword.operator.comparison.php#545333
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#545333
meta.function.decorator.python#545333
support.token.decorator.python,meta.function.decorator.identifier.python#545333
function.parameter#545333
function.brace#545333
function.parameter.ruby, function.parameter.cs#545333
constant.language.symbol.ruby#545333
rgb-value#545333
inline-color-decoration rgb-value#545333
less rgb-value#545333
selector.sass#545333
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#545333
block.scope.end,block.scope.begin#545333
storage.type.cs#545333
entity.name.variable.local.cs#545333
token.info-token#545333
token.warn-token#545333
token.error-token#545333
token.debug-token#545333
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#545333
meta.template.expression#545333
keyword.operator.module#545333
support.type.type.flowtype#545333
support.type.primitive#545333
meta.property.object#545333
variable.parameter.function.js#545333
keyword.other.template.begin#545333
keyword.other.template.end#545333
keyword.other.substitution.begin#545333
keyword.other.substitution.end#545333
keyword.operator.assignment#545333
keyword.operator.assignment.go#545333
keyword.operator.arithmetic.go, keyword.operator.address.go#545333
entity.name.package.go#545333
support.type.prelude.elm#545333
support.constant.elm#545333
punctuation.quasi.element#545333
constant.character.entity#545333
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#545333
entity.global.clojure#545333
meta.symbol.clojure#545333
constant.keyword.clojure#545333
meta.arguments.coffee, variable.parameter.function.coffee#545333
source.ini#545333
meta.scope.prerequisites.makefile#545333
source.makefile#545333
storage.modifier.import.groovy#545333
meta.method.groovy#545333
meta.definition.variable.name.groovy#545333
meta.definition.class.inherited.classes.groovy#545333
support.variable.semantic.hlsl#545333
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#545333
text.variable, text.bracketed#545333
support.type.swift, support.type.vb.asp#545333
entity.name.function.xi#545333
entity.name.class.xi#545333
constant.character.character-class.regexp.xi#545333
constant.regexp.xi#545333
keyword.control.xi#545333
invalid.xi#545333
beginning.punctuation.definition.quote.markdown.xi#545333
beginning.punctuation.definition.list.markdown.xi#a8a8a8
constant.character.xi#545333
accent.xi#545333
wikiword.xi#545333
constant.other.color.rgb-value.xi#efefef
punctuation.definition.tag.xi#a8a8a8
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#545333
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#545333
meta.brace.square#545333
comment, punctuation.definition.comment#a8a8a8italic
markup.quote.markdown#a8a8a8
punctuation.definition.block.sequence.item.yaml#545333
constant.language.symbol.elixir#545333
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic