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#0c0b0c
  • activityBar.foreground#F5F5F5F5
  • activityBarBadge.background#F21651
  • activityBarBadge.foreground#F5F5F5
  • badge.background#F21651
  • button.background#F21651
  • debugToolBar.background#030302
  • debugToolBar.border#F2165150
  • dropdown.background#0f0f11
  • dropdown.border#0f0f11
  • editor.background#0f0f11
  • editor.findMatchBackground#F2165150
  • editor.findMatchBorder#F2165150
  • editor.findMatchHighlightBackground#F2165150
  • editor.foreground#F5F5F5
  • editor.lineHighlightBackground#F2165130
  • editor.selectionBackground#F2165170
  • editor.selectionHighlightBackground#F2165150
  • editor.selectionHighlightBorder#F2165150
  • editor.wordHighlightBackground#F2165150
  • editor.wordHighlightBorder#F2165150
  • editor.wordHighlightStrongBackground#F2165150
  • editor.wordHighlightStrongBorder#F2165150
  • editorBracketMatch.border#F21651
  • editorGroupHeader.noTabsBackground#0f0f11
  • editorGroupHeader.tabsBackground#0f0f11
  • editorWidget.background#0f0f11
  • input.background#0f0f11
  • list.activeSelectionBackground#F2165150
  • list.activeSelectionForeground#F5F5F5
  • list.focusBackground#F2165150
  • list.highlightForeground#F21651
  • list.hoverBackground#F2165150
  • list.inactiveSelectionBackground#F2165150
  • list.inactiveSelectionForeground#F5F5F5
  • scrollbarSlider.activeBackground#F2165150
  • scrollbarSlider.background#F2165150
  • scrollbarSlider.hoverBackground#F2165150
  • sideBar.background#0c0b0c
  • sideBarSectionHeader.background#080B0F
  • statusBar.background#0f0f11
  • statusBar.debuggingBackground#030302
  • statusBar.debuggingForeground#F5F5F5
  • statusBar.foreground#F5F5F5
  • statusBar.noFolderBackground#030302
  • statusBar.noFolderForeground#F5F5F5
  • statusBarItem.hoverBackground#F2165150
  • statusBarItem.remoteBackground#F21651
  • statusBarItem.remoteForeground#F5F5F5
  • tab.activeBackground#0f0f11
  • tab.activeBorder#F21651
  • tab.activeForeground#F5f5f5
  • tab.inactiveBackground#0f0f11
  • terminal.background#0f0f11
  • textLink.activeForeground#F2165190
  • textLink.foreground#F21651
  • titleBar.activeBackground#111820
  • titleBar.activeForeground#F5F5F5
  • titleBar.inactiveBackground#111820
  • titleBar.inactiveForeground#F5F5F5

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