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.

  • editor.background#ffffff
  • editor.lineHighlightBackground#007acc20
  • editor.lineHighlightBorder#007acc00
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9e9e9e
  • focusBorder#e0e0e0
  • input.border#eeeeee
  • input.foreground#212121
  • inputOption.activeBackground#007acc50
  • inputOption.activeBorder#ffffff00
  • sideBar.background#ffffff
  • sideBar.border#eeeeee
  • sideBarSectionHeader.background#ffffff00
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#007acc
  • statusBar.debuggingForeground#212121
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#ffffff
  • statusBar.noFolderBorder#ffffff
  • statusBar.noFolderForeground#212121
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#007acc
  • statusBarItem.remoteForeground#ffffff
  • titleBar.activeBackground#ffffff
  • titleBar.border#ffffff00
  • titleBar.inactiveBackground#f1f1f1

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#000000
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#000000
variable.parameter.function.language.special.self.python#df3079
storage.modifier.lifetime.rust#000000
support.function.std.rust#f22c3d
entity.name.lifetime.rust#df3079
variable.language.rust#000000
support.constant.edge#2e95d3
constant.other.character-class.regexp#000000
keyword.operator.quantifier.regexp#d19a66
punctuation.definition.string.begin,punctuation.definition.string.end#00a67d
variable.parameter.function#000000
comment markup.link#00000080
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#000000
meta.function.c,meta.function.cpp#000000
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#000000
punctuation.separator.key-value#000000
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#000000
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#000000
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#000000
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#000000
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#000000
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#000000
support.variable.property.process#d19a66
entity.name.function,support.function.console#f22c3d
keyword.operator.misc.rust#000000
keyword.operator.sigil.rust#2e95d3
keyword.operator.delete#2e95d3
support.type.object.dom#61afef
support.variable.dom,support.variable.property.dom#000000
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#000000
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#000000
meta.function-call.generic.python#f22c3d
constant.character.format.placeholder.other.python#d19a66
keyword.operator#000000
keyword.operator.assignment.compound#2e95d3
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#61afef
keyword#2e95d3
entity.name.namespace#df3079
variable#000000
variable.c#000000
variable.language#df3079
token.variable.parameter.java#000000
import.storage.java#df3079
token.package.keyword#2e95d3
token.package#000000
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#000000
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#000000
support.constant.property-value#000000
support.constant.font-name#d19a66
meta.tag#000000
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#000000
markup.heading punctuation.definition.heading, entity.name.section#f22c3d
keyword.other.unit#000000
markup.bold,todo.bold#d19a66
punctuation.definition.bold#df3079
markup.italic, punctuation.definition.italic,todo.emphasis#2e95d3
emphasis md#2e95d3
entity.name.section.markdown#000000
punctuation.definition.heading.markdown#000000
punctuation.definition.list.begin.markdown#000000
markup.heading.setext#000000
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#00a67d
markup.inline.raw.string.markdown#00a67d
punctuation.definition.list.markdown#000000
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#000000
beginning.punctuation.definition.list.markdown#000000
punctuation.definition.metadata.markdown#000000
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#000000
punctuation.section.embedded.begin,punctuation.section.embedded.end#2e95d3
invalid.illegal#000000
invalid.illegal.bad-ampersand.html#000000
invalid.broken#000000
invalid.deprecated#000000
invalid.unimplemented#000000
source.json meta.structure.dictionary.json > string.quoted.json#000000
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#000000
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#000000
support.type.property-name.json punctuation#000000
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#000000
punctuation.section.array.end.php#000000
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#000000
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#000000
function.brace#000000
function.parameter.ruby, function.parameter.cs#000000
constant.language.symbol.ruby#61afef
rgb-value#61afef
inline-color-decoration rgb-value#d19a66
less rgb-value#d19a66
selector.sass#000000
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#df3079
block.scope.end,block.scope.begin#000000
storage.type.cs#df3079
entity.name.variable.local.cs#000000
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#000000
keyword.operator.module#2e95d3
support.type.type.flowtype#f22c3d
support.type.primitive#df3079
meta.property.object#000000
variable.parameter.function.js#000000
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#000000
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#61afef
entity.global.clojure#df3079
meta.symbol.clojure#000000
constant.keyword.clojure#61afef
meta.arguments.coffee, variable.parameter.function.coffee#000000
source.ini#00a67d
meta.scope.prerequisites.makefile#000000
source.makefile#df3079
storage.modifier.import.groovy#df3079
meta.method.groovy#f22c3d
meta.definition.variable.name.groovy#000000
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#000000
support.type.swift, support.type.vb.asp#df3079
entity.name.function.xi#df3079
entity.name.class.xi#61afef
constant.character.character-class.regexp.xi#000000
constant.regexp.xi#2e95d3
keyword.control.xi#61afef
invalid.xi#000000
beginning.punctuation.definition.quote.markdown.xi#00a67d
beginning.punctuation.definition.list.markdown.xi#00000080
constant.character.xi#f22c3d
accent.xi#f22c3d
wikiword.xi#d19a66
constant.other.color.rgb-value.xi#000000
punctuation.definition.tag.xi#00000080
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#000000
meta.brace.square#000000
comment, punctuation.definition.comment#00000080italic
markup.quote.markdown#00000080
punctuation.definition.block.sequence.item.yaml#000000
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
Liquid Designs by Dragos Popa - VS Code Theme