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

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