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#3584e4
  • activityBar.background#f6f5f4
  • activityBar.foreground#121417
  • activityBarBadge.background#3584e4
  • activityBarBadge.foreground#f6f5f4
  • badge.background#3584e4
  • badge.foreground#f6f5f4
  • breadcrumb.background#f6f5f4
  • button.background#dedad7
  • button.foreground#2e3436
  • button.hoverBackground#cfcac4
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#f6f5f4
  • dropdown.border#f6f5f4
  • editor.background#f6f5f4
  • editor.findMatchHighlightBackground#526fff33
  • editor.foreground#d84551
  • editor.lineHighlightBackground#d845510c
  • editor.selectionBackground#e5e5e6
  • editorCursor.foreground#526fff
  • editorGroup.border#f6f5f4
  • editorGroupHeader.tabsBackground#f6f5f4
  • editorHoverWidget.background#eaeaeb
  • editorHoverWidget.border#f6f5f4
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#d8455133
  • editorLineNumber.activeForeground#d84551
  • editorLineNumber.foreground#9d9d9f
  • editorOverviewRuler.border#f6f5f4
  • editorRuler.foreground#d8455133
  • editorSuggestWidget.background#eaeaeb
  • editorSuggestWidget.border#f6f5f4
  • editorSuggestWidget.selectedBackground#f6f5f4
  • editorWhitespace.foreground#d8455133
  • editorWidget.background#eaeaeb
  • editorWidget.border#e5e5e6
  • extensionButton.prominentBackground#dedad7
  • extensionButton.prominentHoverBackground#cfcac4
  • focusBorder#3584e4
  • input.background#f6f5f4
  • input.border#f6f5f4
  • list.activeSelectionBackground#f6f5f4
  • list.activeSelectionForeground#232324
  • list.focusBackground#f6f5f4
  • list.highlightForeground#121417
  • list.hoverBackground#d6d6d666
  • list.inactiveSelectionBackground#f6f5f4
  • list.inactiveSelectionForeground#232324
  • menu.background#f6f5f4
  • menu.selectionBackground#d1d1d1
  • panel.background#f6f5f4
  • panelTitle.activeBorder#3584e4
  • peekView.border#526fff
  • peekViewEditor.background#f6f5f4
  • peekViewResult.background#eaeaeb
  • peekViewResult.selectionBackground#f6f5f4
  • peekViewTitle.background#f6f5f4
  • pickerGroup.border#526fff
  • scrollbarSlider.activeBackground#bbbbbb
  • scrollbarSlider.background#f6f5f4
  • scrollbarSlider.hoverBackground#bbbbbb
  • sideBar.background#f6f5f4
  • sideBarSectionHeader.background#f1efee
  • statusBar.background#f6f5f4
  • statusBar.debuggingForeground#f6f5f4
  • statusBar.foreground#676a70
  • statusBar.noFolderBackground#1a1c22
  • statusBarItem.hoverBackground#dadada
  • statusBarItem.remoteForeground#fff
  • statusBarItem.warningBackground#1a1c22
  • statusBarItem.warningForeground#b78853
  • tab.activeBackground#f6f5f4
  • tab.activeBorderTop#3584e4
  • tab.activeForeground#121417
  • tab.border#f6f5f4
  • tab.inactiveBackground#f1efee
  • terminal.background#f6f5f4
  • textLink.foreground#3584e4
  • titleBar.activeBackground#f6f5f4
  • titleBar.activeForeground#121417
  • titleBar.inactiveBackground#f6f5f4
  • titleBar.inactiveForeground#121417

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