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#141416
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#5100ba
  • activityBarBadge.foreground#f8fafd
  • badge.background#141416
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#141416
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#141416
  • dropdown.border#141416
  • editor.background#141416
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#C792EA
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#141416
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#141416
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#F07178
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#141416
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#141416
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#C792EA
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#141416
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • list.activeSelectionBackground#6200ff5e
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2c313a
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#C792EA
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#141416
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#141416
  • settings.headerForeground#fff
  • sideBar.background#141416
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#141416
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#1A1A1C
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#141416
  • statusBarItem.remoteBackground#5100ba
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#141416
  • tab.activeBorder#5100ba
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#1F2329
  • tab.inactiveBackground#141416
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#141416
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#3794ff
  • textPreformat.foreground#C792EA
  • titleBar.activeBackground#141416
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#141416
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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