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#1b61d2
  • activityBar.background#131415
  • activityBar.border#0b0c0d
  • activityBar.foreground#f6f7f8
  • activityBarBadge.background#1b61d2
  • activityBarBadge.foreground#0b0c0d
  • button.background#1b61d2
  • button.foreground#0b0c0d
  • button.hoverBackground#1959be
  • diffEditor.deletedTextBackground#e628451a
  • diffEditor.insertedTextBackground#00b15a1a
  • dropdown.background#18191a
  • dropdown.border#26282b
  • dropdown.foreground#f6f7f8
  • editor.background#0b0c0d
  • editor.foreground#f6f7f8
  • editor.lineHighlightBackground#181f398c
  • editor.selectionBackground#1b61d24d
  • editorCursor.foreground#1b61d2
  • editorGroupHeader.tabsBackground#131415
  • editorGroupHeader.tabsBorder#0b0c0d
  • editorIndentGuide.activeBackground#1e1f21
  • editorIndentGuide.background#222426
  • editorLineNumber.activeForeground#919aa2
  • editorLineNumber.foreground#636c74
  • focusBorder#1b61d2
  • foreground#f6f7f8
  • gitDecoration.addedResourceForeground#00b15a
  • gitDecoration.conflictingResourceForeground#ffc900
  • gitDecoration.deletedResourceForeground#e62845
  • gitDecoration.ignoredResourceForeground#636c74
  • gitDecoration.modifiedResourceForeground#1b61d2
  • gitDecoration.untrackedResourceForeground#00b15a
  • input.background#18191a
  • input.border#26282b
  • input.foreground#f6f7f8
  • input.placeholderForeground#50575d
  • list.activeSelectionBackground#181f3999
  • list.activeSelectionForeground#f6f7f8
  • list.focusOutline#1b61d2
  • list.hoverBackground#181f3959
  • list.inactiveSelectionBackground#181f3973
  • panel.background#131415
  • panel.border#0b0c0d
  • panelTitle.activeBorder#1b61d2
  • panelTitle.activeForeground#f6f7f8
  • panelTitle.inactiveForeground#636c74
  • selection.background#181f39
  • sideBar.background#131415
  • sideBar.border#0b0c0d
  • sideBar.foreground#919aa2
  • sideBarSectionHeader.background#131415
  • sideBarSectionHeader.border#0b0c0d
  • sideBarSectionHeader.foreground#919aa2
  • sideBarTitle.foreground#f6f7f8
  • statusBar.background#131415
  • statusBar.border#0b0c0d
  • statusBar.debuggingBackground#ffc900
  • statusBar.debuggingForeground#0b0c0d
  • statusBar.foreground#919aa2
  • statusBar.noFolderBackground#131415
  • statusBarItem.remoteBackground#131415
  • statusBarItem.remoteForeground#919aa2
  • tab.activeBackground#0b0c0d
  • tab.activeBorderTop#1b61d2
  • tab.activeForeground#f6f7f8
  • tab.border#0b0c0d
  • tab.inactiveBackground#131415
  • tab.inactiveForeground#636c74
  • terminal.ansiBlack#131415
  • terminal.ansiBlue#0075ff
  • terminal.ansiBrightBlack#131415
  • terminal.ansiBrightBlue#0075ff
  • terminal.ansiBrightCyan#00b4f8
  • terminal.ansiBrightGreen#00b15a
  • terminal.ansiBrightMagenta#ae29c9
  • terminal.ansiBrightRed#e62845
  • terminal.ansiBrightWhite#abb2b8
  • terminal.ansiBrightYellow#ffc900
  • terminal.ansiCyan#00b4f8
  • terminal.ansiGreen#00b15a
  • terminal.ansiMagenta#ae29c9
  • terminal.ansiRed#e62845
  • terminal.ansiWhite#abb2b8
  • terminal.ansiYellow#ffc900
  • terminal.background#131415
  • terminal.foreground#919aa2
  • terminal.titleForeground#919aa2
  • terminal.titleInactiveForeground#636c74
  • textLink.activeForeground#1b61d2
  • textLink.foreground#1b61d2
  • titleBar.activeBackground#131415
  • titleBar.activeForeground#f6f7f8
  • titleBar.border#0b0c0d
  • titleBar.inactiveBackground#131415
  • titleBar.inactiveForeground#636c74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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