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#111111
  • activityBar.foreground#B8B6C3
  • activityBar.inactiveForeground#808D71
  • activityBarBadge.background#d55e5e
  • activityBarBadge.foreground#B8B6C3
  • badge.background#d55e5e
  • button.background#aaeb83
  • button.foreground#111111
  • button.secondaryBackground#1a1a1a
  • button.secondaryForeground#B8B6C3
  • checkbox.border#aaeb8340
  • debugToolBar.background#111111
  • descriptionForeground#808D71
  • diffEditor.insertedTextBackground#aaeb8320
  • dropdown.background#1a1a1a
  • dropdown.border#aaeb8330
  • editor.background#111111
  • editor.findMatchBackground#aaeb8350
  • editor.findMatchBorder#aaeb83
  • editor.findMatchHighlightBackground#aaeb8325
  • editor.foreground#B8B6C3
  • editor.lineHighlightBackground#aaeb8310
  • editor.selectionBackground#aaeb8335
  • editor.selectionHighlightBackground#aaeb8320
  • editor.selectionHighlightBorder#aaeb8350
  • editor.wordHighlightBackground#d55e5e20
  • editor.wordHighlightBorder#d55e5e50
  • editor.wordHighlightStrongBackground#d55e5e35
  • editor.wordHighlightStrongBorder#d55e5e70
  • editorBracketHighlight.foreground1#aaeb83
  • editorBracketHighlight.foreground2#B8B6C3
  • editorBracketHighlight.foreground3#808D71
  • editorBracketMatch.background#aaeb8325
  • editorBracketMatch.border#aaeb83
  • editorCursor.background#111111
  • editorCursor.foreground#aaeb83
  • editorError.foreground#d55e5e
  • editorGroup.background#111111
  • editorGroup.border#aaeb8320
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGutter.addedBackground#aaeb83
  • editorGutter.deletedBackground#d55e5e
  • editorGutter.modifiedBackground#808D71
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#aaeb8330
  • editorHoverWidget.highlightForeground#aaeb83
  • editorIndentGuide.activeBackground1#aaeb8350
  • editorIndentGuide.background1#aaeb8315
  • editorInlayHint.background#1a1a1a
  • editorInlayHint.foreground#808D71
  • editorLineNumber.activeForeground#B8B6C3
  • editorLineNumber.foreground#808D71
  • editorMarkerNavigation.background#111111
  • editorOverviewRuler.addedBackground#aaeb83
  • editorOverviewRuler.deletedBackground#d55e5e
  • editorOverviewRuler.modifiedBackground#808D71
  • editorRuler.foreground#aaeb8315
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#aaeb8330
  • editorSuggestWidget.selectedBackground#aaeb8325
  • editorWarning.foreground#808D71
  • editorWhitespace.foreground#aaeb8310
  • editorWidget.background#111111
  • focusBorder#aaeb83
  • foreground#B8B6C3
  • gitDecoration.addedResourceForeground#aaeb83
  • gitDecoration.deletedResourceForeground#d55e5e
  • gitDecoration.ignoredResourceForeground#535353
  • gitDecoration.modifiedResourceForeground#808D71
  • gitDecoration.untrackedResourceForeground#aaeb83
  • inlayHint.background#1a1a1a
  • input.background#1a1a1a
  • input.foreground#B8B6C3
  • list.activeSelectionBackground#aaeb8325
  • list.activeSelectionForeground#B8B6C3
  • list.focusBackground#aaeb8320
  • list.focusForeground#B8B6C3
  • list.highlightForeground#aaeb83
  • list.hoverBackground#aaeb8310
  • list.hoverForeground#B8B6C3
  • list.inactiveSelectionBackground#aaeb8315
  • list.inactiveSelectionForeground#B8B6C3
  • list.warningForeground#808D71
  • menu.background#1a1a1acc
  • menu.foreground#B8B6C3
  • menu.selectionBackground#aaeb8325
  • menu.selectionForeground#B8B6C3
  • menu.separatorBackground#aaeb8320
  • menubar.selectionBackground#aaeb8320
  • menubar.selectionForeground#B8B6C3
  • minimapGutter.addedBackground#aaeb83
  • minimapGutter.deletedBackground#d55e5e
  • minimapGutter.modifiedBackground#808D71
  • multiDiffEditor.headerBackground#111111
  • panel.border#aaeb8320
  • panelSectionHeader.background#1a1a1a
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#aaeb8330
  • peekViewResult.background#1a1a1a
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#aaeb83cc
  • scrollbarSlider.background#aaeb8330
  • scrollbarSlider.hoverBackground#aaeb8360
  • settings.focusedRowBackground#aaeb8310
  • settings.headerForeground#B8B6C3
  • sideBar.background#1a1a1a
  • sideBar.foreground#B8B6C3
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#aaeb83
  • statusBar.background#111111
  • statusBar.border#808D7150
  • statusBar.debuggingBackground#d55e5e
  • statusBar.debuggingBorder#6b1a1a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#808D71
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#aaeb8320
  • statusBarItem.remoteBackground#aaeb83
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#111111
  • tab.activeBorder#aaeb83
  • tab.activeForeground#B8B6C3
  • tab.border#aaeb8310
  • tab.hoverBackground#aaeb8315
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#808D71
  • tab.unfocusedHoverBackground#aaeb8310
  • terminal.ansiBlack#111111
  • terminal.ansiBlue#aaeb83
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#9ddcb4
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#4ecb71
  • terminal.ansiBrightMagenta#d070f0
  • terminal.ansiBrightRed#e74c3c
  • terminal.ansiBrightWhite#B8B6C3
  • terminal.ansiBrightYellow#808D71
  • terminal.ansiCyan#1a8fa0
  • terminal.ansiGreen#27ae60
  • terminal.ansiMagenta#808D71
  • terminal.ansiRed#d55e5e
  • terminal.ansiWhite#B8B6C3
  • terminal.ansiYellow#808D71
  • terminal.background#1a1a1a
  • terminal.border#aaeb8320
  • terminal.foreground#B8B6C3
  • terminal.selectionBackground#aaeb8330
  • textBlockQuote.background#1a1a1a
  • textBlockQuote.border#aaeb83
  • textLink.foreground#aaeb83
  • textPreformat.foreground#B8B6C3
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#808D71
  • titleBar.border#808D7130
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#444444
  • tree.indentGuidesStroke#aaeb8320
  • walkThrough.embeddedEditorBackground#111111
  • welcomePage.buttonHoverBackground#aaeb8325

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#B8B6C3
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#aaeb83
variable.other.generic-type.haskell#aaeb83
storage.type.haskell#aaeb83
support.variable.magic.python#c14046
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#B8B6C3
variable.parameter.function.language.special.self.python#aaeb83
variable.parameter.function.language.special.cls.python#aaeb83
storage.modifier.lifetime.rust#aaeb83
support.function.std.rust#808D71
entity.name.lifetime.rust#808D71
variable.language.rust#c14046
support.constant.edge#aaeb83
constant.other.character-class.regexp#d55e5e
keyword.operator.word#aaeb83
keyword.operator.quantifier.regexp#d55e5e
variable.parameter.function#B8B6C3
comment markup.link#375949
markup.changed.diff#808D71
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#aaeb83
markup.inserted.diff#aaeb83
markup.deleted.diff#d55e5e
meta.function.c,meta.function.cpp#808D71
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#B8B6C3
punctuation.separator.key-value#B8B6C3
keyword.operator.expression.import#aaeb83
support.constant.math#aaeb83
support.constant.property.math#808D71
variable.other.constant#808D71
storage.type.annotation.java, storage.type.object.array.java#aaeb83
source.java#B8B6C3
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#808D71
meta.method.java#808D71
storage.modifier.import.java,storage.type.java,storage.type.generic.java#aaeb83
keyword.operator.instanceof.java#aaeb83
meta.definition.variable.name.java#B8B6C3
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#aaeb83
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#aaeb83
punctuation.separator.delimiter#B8B6C3
punctuation.separator.c,punctuation.separator.cpp#B8B6C3
support.type.posix-reserved.c,support.type.posix-reserved.cpp#aaeb83
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#aaeb83
variable.parameter.function.language.python#B8B6C3
support.type.python#aaeb83
keyword.operator.logical.python#aaeb83
variable.parameter.function.python#B8B6C3
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#B8B6C3
meta.function-call.generic.python#808D71
constant.character.format.placeholder.other.python#808D71
keyword.operator#aaeb83
keyword.operator.assignment.compound#aaeb83
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#aaeb83
keyword#aaeb83
entity.name.namespace#B8B6C3
variable#B8B6C3
variable.c#B8B6C3
variable.language#aaeb83
token.variable.parameter.java#B8B6C3
import.storage.java#aaeb83
token.package.keyword#aaeb83
token.package#aaeb83
entity.name.function, meta.require, support.function.any-method, variable.function#808D71
entity.name.type.namespace#B8B6C3
support.class, entity.name.type.class#B8B6C3
entity.name.class.identifier.namespace.type#B8B6C3
entity.name.class, variable.other.class.js, variable.other.class.ts#B8B6C3
variable.other.class.php#B8B6C3
entity.name.type#B8B6C3
keyword.control#59bf23
control.elements, keyword.operator.less#aaeb83
keyword.other.special-method#808D71
storage#d581f1
token.storage#d581f1
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#aaeb83
token.storage.type.java#aaeb83
support.function#808D71
support.type.property-name#B8B6C3
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#aaeb83
support.constant.property-value#B8B6C3
support.constant.font-name#808D71
meta.tag#B8B6C3
string#aaeb83
constant.other.symbol#808D71
constant.numeric#808D71
constant#808D71
punctuation.definition.constant#808D71
entity.name.tag#a531c8
entity.other.attribute-name#B8B6C3
entity.other.attribute-name.id#aaeb83
entity.other.attribute-name.class.css#808D71
meta.selector#aaeb83
markup.heading#c14046
markup.heading punctuation.definition.heading, entity.name.section#aaeb83
keyword.other.unit#808D71
markup.bold,todo.bold#B8B6C3
punctuation.definition.bold#aaeb83
markup.italic, punctuation.definition.italic,todo.emphasis#aaeb83
emphasis md#aaeb83
entity.name.section.markdown#c14046
punctuation.definition.heading.markdown#c14046
punctuation.definition.list.begin.markdown#aaeb83
markup.heading.setext#c14046
punctuation.definition.bold.markdown#B8B6C3
markup.inline.raw.markdown#808D71
markup.inline.raw.string.markdown#aaeb83
punctuation.definition.raw.markdown#808D71
punctuation.definition.list.markdown#aaeb83
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#aaeb83
beginning.punctuation.definition.list.markdown#aaeb83
punctuation.definition.metadata.markdown#aaeb83
markup.underline.link.markdown,markup.underline.link.image.markdown#aaeb83
string.other.link.title.markdown,string.other.link.description.markdown#B8B6C3
markup.raw.monospace.asciidoc#808D71
punctuation.definition.asciidoc#aaeb83
markup.list.asciidoc#aaeb83
markup.link.asciidoc,markup.other.url.asciidoc#aaeb83
string.unquoted.asciidoc,markup.other.url.asciidoc#aaeb83
string.regexp#d55e5e
punctuation.section.embedded, variable.interpolation#c14046
punctuation.section.embedded.begin,punctuation.section.embedded.end#aaeb83
invalid.illegal#d55e5e
invalid.illegal.bad-ampersand.html#d55e5e
invalid.illegal.unrecognized-tag.html#d55e5e
invalid.broken#d55e5e
invalid.deprecated#d55e5e
invalid.deprecated.entity.other.attribute-name.html#d55e5e
invalid.unimplemented#d55e5e
source.json meta.structure.dictionary.json > string.quoted.json#aaeb83
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#aaeb83
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#aaeb83
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#808D71
support.type.property-name.json#c14046
support.type.property-name.json punctuation#c14046
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#c14046
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#aaeb83
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#aaeb83
keyword.operator.error-control.php#aaeb83
keyword.operator.type.php#aaeb83
punctuation.section.array.begin.php#B8B6C3
punctuation.section.array.end.php#B8B6C3
invalid.illegal.non-null-typehinted.php#d55e5e
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#aaeb83
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#808D71
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#aaeb83
support.constant.core.rust#808D71
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#808D71
entity.name.goto-label.php,support.other.php#aaeb83
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#aaeb83
keyword.operator.regexp.php#d55e5e
keyword.operator.comparison.php#aaeb83
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#aaeb83
meta.function.decorator.python#808D71
support.token.decorator.python,meta.function.decorator.identifier.python#808D71
function.parameter#B8B6C3
function.brace#B8B6C3
function.parameter.ruby, function.parameter.cs#B8B6C3
constant.language.symbol.ruby#808D71
constant.language.symbol.hashkey.ruby#808D71
rgb-value#aaeb83
inline-color-decoration rgb-value#B8B6C3
less rgb-value#B8B6C3
selector.sass#c14046
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#aaeb83
block.scope.end,block.scope.begin#B8B6C3
storage.type.cs#aaeb83
entity.name.variable.local.cs#B8B6C3
token.info-token#aaeb83
token.warn-token#808D71
token.error-token#c14046
token.debug-token#808D71
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#aaeb83
meta.template.expression#B8B6C3
keyword.operator.module#aaeb83
support.type.type.flowtype#aaeb83
support.type.primitive#aaeb83
meta.property.object#B8B6C3
variable.parameter.function.js#B8B6C3
keyword.other.template.begin#aaeb83
keyword.other.template.end#aaeb83
keyword.other.substitution.begin#aaeb83
keyword.other.substitution.end#aaeb83
keyword.operator.assignment#aaeb83
keyword.operator.assignment.go#aaeb83
keyword.operator.arithmetic.go, keyword.operator.address.go#aaeb83
keyword.operator.arithmetic.c, keyword.operator.arithmetic.cpp#aaeb83
entity.name.package.go#808D71
support.type.prelude.elm#aaeb83
support.constant.elm#808D71
punctuation.quasi.element#aaeb83
constant.character.entity#808D71
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#aaeb83
entity.global.clojure#aaeb83
meta.symbol.clojure#B8B6C3
constant.keyword.clojure#aaeb83
meta.arguments.coffee, variable.parameter.function.coffee#808D71
source.ini#B8B6C3
meta.scope.prerequisites.makefile#c14046
source.makefile#aaeb83
storage.modifier.import.groovy#aaeb83
meta.method.groovy#808D71
meta.definition.variable.name.groovy#B8B6C3
meta.definition.class.inherited.classes.groovy#808D71
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl#aaeb83
text.variable, text.bracketed#B8B6C3
support.type.swift, support.type.vb.asp#aaeb83
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#808D71
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#c14046
meta.brace.square#B8B6C3
comment, punctuation.definition.comment#375949italic
markup.quote.markdown#375949
punctuation.definition.block.sequence.item.yaml#B8B6C3
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#808D71
entity.name.variable.parameter.cs#B8B6C3
entity.name.variable.field.cs#B8B6C3
markup.deleted#d55e5e
markup.inserted#aaeb83
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#aaeb83
support.other.namespace.php#aaeb83
variable.parameter.function.latex#B8B6C3
variable.other.object#B8B6C3
variable.other.constant.property#808D71
entity.other.inherited-class#808D71
variable.other.readwrite.c#B8B6C3
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#B8B6C3
constant.numeric.decimal.asm.x86_64#808D71
support.other.parenthesis.regexp#d55e5e
constant.character.escape#aaeb83
string.regexp#d55e5e
log.info#aaeb83
log.warning#808D71
log.error#c14046
keyword.operator.expression.is#aaeb83
entity.name.label#808D71
support.class.math.block.environment.latex, constant.other.general.math.tex#B8B6C3
constant.character.math.tex#808D71
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
markup.italic.markdownitalic