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.

  • debugToolBar.background#222121
  • debugToolBar.border#ffffff00
  • editor.background#222121
  • editor.foreground#dddddd
  • editorCursor.foreground#ddd
  • editorGroupHeader.tabsBackground#222121
  • editorLineNumber.activeForeground#ddd
  • editorWidget.background#212121
  • editorWidget.foreground#ddd
  • editorWidget.resizeBorder#dddddd50
  • focusBorder#ffffff66
  • foreground#ddd
  • input.background#222121
  • input.border#dddddd50
  • input.foreground#ddd
  • input.placeholderForeground#dddddd50
  • inputOption.activeBackground#007fd466
  • inputOption.activeBorder#0c5c9200
  • inputOption.activeForeground#ddd
  • inputValidation.warningForeground#ddd
  • panel.background#222121
  • peekView.border#dddddd50
  • peekViewEditor.background#222121
  • peekViewEditor.matchHighlightBackground#ea5c004d
  • peekViewEditorGutter.background#222121
  • peekViewResult.background#222121
  • peekViewResult.fileForeground#ddd
  • peekViewTitleDescription.foreground#dddddd50
  • pickerGroup.border#444444
  • pickerGroup.foreground#ddd
  • sideBar.background#222121
  • sideBar.border#444444
  • sideBar.foreground#ddd
  • sideBarSectionHeader.background#00000000
  • statusBar.background#222121
  • statusBar.border#ff000000
  • statusBar.debuggingBackground#ddd
  • statusBar.debuggingForeground#222121
  • statusBar.foreground#dddddd
  • statusBar.noFolderBackground#ddd
  • statusBar.noFolderForeground#222121
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#ddd
  • statusBarItem.remoteForeground#222121
  • tab.activeBackground#222121
  • tab.activeForeground#ddd
  • tab.inactiveBackground#1C1C1C
  • tab.inactiveForeground#ffffff66
  • textLink.foreground#ddd
  • titleBar.activeBackground#222121
  • titleBar.activeForeground#dddddd
  • titleBar.border#00000000
  • titleBar.inactiveBackground#222121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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