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#1e1e1e
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#1e1e1e
  • button.background#404754
  • debugToolBar.background#1e1e1e
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1e1e1e
  • dropdown.border#1e1e1e
  • editor.background#1e1e1e
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365ad
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#484e5b65
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.border#242424
  • editorGroup.emptyBackground#242424
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#242424
  • editorLineNumber.activeForeground#737984
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#1e1e1e
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1e1e1e
  • editorSuggestWidget.border#242424
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#1e1e1e
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#c8c8c8
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#1e1e1e
  • sideBarSectionHeader.background#1e1e1e
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#1e1e1e
  • tab.activeForeground#dcdcdc
  • tab.border#242424
  • tab.hoverBackground#323842
  • tab.inactiveBackground#1e1e1e
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#89CA78
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#58eb7e
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#89CA78
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#F94B65
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#58eb7e
  • terminal.foreground#c8c8c8
  • textLink.foreground#61afef
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1e1e1e
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#abb2bf
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#F94B65
variable.other.generic-type.haskell#c678dd
storage.type.haskell#d19a66
support.variable.magic.python#F94B65
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#58EB7E
variable.parameter.function.language.special.cls.python#58EB7E
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#61afef
entity.name.lifetime.rust#58EB7E
variable.language.rust#F94B65
support.constant.edge#c678dd
constant.other.character-class.regexp#F94B65
keyword.operator.word#c678dd
keyword.operator.quantifier.regexp#d19a66
variable.parameter.function#abb2bf
comment markup.link#5c6370
markup.changed.diff#58EB7E
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61afef
markup.inserted.diff#89CA78
markup.deleted.diff#F94B65
meta.function.c,meta.function.cpp#F94B65
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#61afef
support.constant.math#58EB7E
support.constant.property.math#d19a66
variable.other.constant#58EB7E
storage.type.annotation.java, storage.type.object.array.java#58EB7E
source.java#F94B65
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#61afef
storage.modifier.import.java,storage.type.java,storage.type.generic.java#58EB7E
keyword.operator.instanceof.java#c678dd
meta.definition.variable.name.java#F94B65
keyword.operator.logical#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.channel#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#d19a66
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#d19a66
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#d19a66
support.type.vendored.property-name.css#56b6c2
support.module.node,support.type.object.module,support.module.node#58EB7E
entity.name.type.module#58EB7E
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#F94B65
support.constant.json#d19a66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#c678dd
support.type.object.console#F94B65
support.variable.property.process#d19a66
entity.name.function,support.function.console#61afef
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#F94B65
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#d19a66
support.type.python#56b6c2
keyword.operator.logical.python#c678dd
variable.parameter.function.python#d19a66
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#61afef
constant.character.format.placeholder.other.python#d19a66
keyword.operator#abb2bf
keyword.operator.assignment.compound#c678dd
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56b6c2
keyword#c678dd
entity.name.namespace#58EB7E
variable#F94B65
variable.c#abb2bf
variable.language#58EB7E
token.variable.parameter.java#abb2bf
import.storage.java#58EB7E
token.package.keyword#c678dd
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#58EB7E
support.class, entity.name.type.class#58EB7E
entity.name.class.identifier.namespace.type#58EB7E
entity.name.class, variable.other.class.js, variable.other.class.ts#58EB7E
variable.other.class.php#F94B65
entity.name.type#58EB7E
keyword.control#c678dd
control.elements, keyword.operator.less#d19a66
keyword.other.special-method#61afef
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#58EB7E
support.function#56b6c2
support.type.property-name#abb2bf
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#F94B65
support.constant.property-value#abb2bf
support.constant.font-name#d19a66
meta.tag#abb2bf
string#89CA78
constant.other.symbol#56b6c2
constant.numeric#d19a66
constant#d19a66
punctuation.definition.constant#d19a66
entity.name.tag#F94B65
entity.other.attribute-name#d19a66
entity.other.attribute-name.id#61afef
entity.other.attribute-name.class.css#d19a66
meta.selector#c678dd
markup.heading#F94B65
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#F94B65
markup.bold,todo.bold#d19a66
punctuation.definition.bold#58EB7E
markup.italic, punctuation.definition.italic,todo.emphasis#c678dd
emphasis md#c678dd
entity.name.section.markdown#F94B65
punctuation.definition.heading.markdown#F94B65
punctuation.definition.list.begin.markdown#58EB7E
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#89CA78
markup.inline.raw.string.markdown#89CA78
punctuation.definition.raw.markdown#58EB7E
punctuation.definition.list.markdown#58EB7E
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#F94B65
beginning.punctuation.definition.list.markdown#F94B65
punctuation.definition.metadata.markdown#F94B65
markup.underline.link.markdown,markup.underline.link.image.markdown#c678dd
string.other.link.title.markdown,string.other.link.description.markdown#61afef
markup.raw.monospace.asciidoc#89CA78
punctuation.definition.asciidoc#58EB7E
markup.list.asciidoc#58EB7E
markup.link.asciidoc,markup.other.url.asciidoc#c678dd
string.unquoted.asciidoc,markup.other.url.asciidoc#61afef
string.regexp#56b6c2
punctuation.section.embedded, variable.interpolation#F94B65
punctuation.section.embedded.begin,punctuation.section.embedded.end#c678dd
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.illegal.unrecognized-tag.html#F94B65
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.deprecated.entity.other.attribute-name.html#d19a66
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#F94B65
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#F94B65
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#89CA78
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
support.type.property-name.json#F94B65
support.type.property-name.json punctuation#F94B65
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#58EB7E
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#58EB7E
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
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#d19a66
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#d19a66
entity.name.goto-label.php,support.other.php#61afef
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#61afef
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#d19a66
less rgb-value#d19a66
selector.sass#F94B65
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#58EB7E
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#58EB7E
entity.name.variable.local.cs#F94B65
token.info-token#61afef
token.warn-token#d19a66
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#61afef
support.type.primitive#58EB7E
meta.property.object#F94B65
variable.parameter.function.js#F94B65
keyword.other.template.begin#89CA78
keyword.other.template.end#89CA78
keyword.other.substitution.begin#89CA78
keyword.other.substitution.end#89CA78
keyword.operator.assignment#56b6c2
keyword.operator.assignment.go#58EB7E
keyword.operator.arithmetic.go, keyword.operator.address.go#c678dd
keyword.operator.arithmetic.c, keyword.operator.arithmetic.cpp#c678dd
entity.name.package.go#58EB7E
support.type.prelude.elm#56b6c2
support.constant.elm#d19a66
punctuation.quasi.element#c678dd
constant.character.entity#F94B65
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
entity.global.clojure#58EB7E
meta.symbol.clojure#F94B65
constant.keyword.clojure#56b6c2
meta.arguments.coffee, variable.parameter.function.coffee#F94B65
source.ini#89CA78
meta.scope.prerequisites.makefile#F94B65
source.makefile#58EB7E
storage.modifier.import.groovy#58EB7E
meta.method.groovy#61afef
meta.definition.variable.name.groovy#F94B65
meta.definition.class.inherited.classes.groovy#89CA78
support.variable.semantic.hlsl#58EB7E
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#F94B65
support.type.swift, support.type.vb.asp#58EB7E
entity.name.function.xi#58EB7E
entity.name.class.xi#56b6c2
constant.character.character-class.regexp.xi#F94B65
constant.regexp.xi#c678dd
keyword.control.xi#56b6c2
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#89CA78
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#61afef
accent.xi#61afef
wikiword.xi#d19a66
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#58EB7E
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#F94B65
meta.brace.square#abb2bf
comment, punctuation.definition.comment#7f848eitalic
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#58EB7E
entity.name.variable.field.cs#F94B65
markup.deleted#F94B65
markup.inserted#89CA78
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#abb2bf
variable.parameter.function.latex#F94B65
variable.other.object#58EB7E
variable.other.constant.property#F94B65
entity.other.inherited-class#58EB7E
variable.other.readwrite.c#F94B65
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#abb2bf
constant.numeric.decimal.asm.x86_64#c678dd
support.other.parenthesis.regexp#d19a66
constant.character.escape#56b6c2
string.regexp#F94B65
log.info#89CA78
log.warning#58EB7E
log.error#F94B65
keyword.operator.expression.is#c678dd
entity.name.label#F94B65
support.class.math.block.environment.latex, constant.other.general.math.tex#61afef
constant.character.math.tex#89CA78
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
source.ruby,punctuation.separator.method.ruby#ABB2BF
constant.language.symbol.hashkey.ruby,constant.other.symbol.hashkey.parameter.function.ruby#D19A66
variable.parameter.function.ruby#F94B65