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.activeBackground#222
  • activityBar.background#000
  • activityBar.border#222222
  • activityBar.foreground#999
  • activityBarBadge.background#2361ba
  • badge.background#2361ba
  • button.background#444
  • debugToolBar.background#000
  • dropdown.background#222
  • editor.background#000c
  • editor.foreground#A9B7C6
  • editor.lineHighlightBorder#fff0
  • editor.selectionBackground#2361ba66
  • editor.selectionHighlightBackground#fff2
  • editor.wordHighlightBackground#8d8d8d2c
  • editorCursor.foreground#47ff6f
  • editorGroupHeader.tabsBackground#000
  • editorSuggestWidget.background#222
  • editorSuggestWidget.border#222222
  • editorWidget.background#000
  • focusBorder#2361ba
  • foreground#A9B7C6
  • input.background#222
  • menu.background#000
  • menu.border#222222
  • menubar.selectionBackground#2361ba
  • minimap.background#000B
  • minimap.selectionHighlight#2361ba66
  • notifications.background#000
  • panel.background#000
  • quickInput.background#000
  • quickInputList.focusBackground#2361ba
  • selection.background#2361ba
  • settings.checkboxBackground#222
  • settings.textInputBackground#222
  • sideBar.background#000
  • sideBar.border#222222
  • sideBarSectionHeader.background#1c1c1c
  • sideBarTitle.foreground#999
  • statusBar.background#000
  • statusBar.border#222222
  • statusBar.debuggingBackground#bf6600
  • statusBar.foreground#A9B7C6
  • tab.activeBorder#aaa
  • tab.border#222222
  • tab.hoverBorder#2361ba
  • tab.inactiveBackground#000
  • terminal.background#000
  • titleBar.activeBackground#000
  • titleBar.border#222
  • titleBar.inactiveBackground#000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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