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#0075ff
  • activityBar.background#eeeff1
  • activityBar.border#e3e5e7
  • activityBar.foreground#0b0c0d
  • activityBarBadge.background#0075ff
  • activityBarBadge.foreground#ffffff
  • button.background#0075ff
  • button.foreground#ffffff
  • button.hoverBackground#1a83ff
  • diffEditor.deletedTextBackground#e6284533
  • diffEditor.insertedTextBackground#00b15a33
  • dropdown.background#e8eaec
  • dropdown.border#c7cbd0
  • dropdown.foreground#0b0c0d
  • editor.background#ffffff
  • editor.foreground#0b0c0d
  • editor.lineHighlightBackground#dfe1ff8c
  • editor.selectionBackground#0075ff2e
  • editorCursor.foreground#0075ff
  • editorGroupHeader.tabsBackground#eeeff1
  • editorGroupHeader.tabsBorder#e3e5e7
  • editorIndentGuide.activeBackground#c7cbd0
  • editorIndentGuide.background#e3e5e7
  • editorLineNumber.activeForeground#3e4347
  • editorLineNumber.foreground#636c74
  • focusBorder#0075ff
  • foreground#0b0c0d
  • gitDecoration.addedResourceForeground#00b15a
  • gitDecoration.conflictingResourceForeground#ffc900
  • gitDecoration.deletedResourceForeground#e62845
  • gitDecoration.ignoredResourceForeground#636c74
  • gitDecoration.modifiedResourceForeground#0075ff
  • gitDecoration.untrackedResourceForeground#00b15a
  • input.background#e8eaec
  • input.border#c7cbd0
  • input.foreground#0b0c0d
  • input.placeholderForeground#77828c
  • list.activeSelectionBackground#dfe1ffcc
  • list.activeSelectionForeground#0b0c0d
  • list.focusOutline#0075ff
  • list.hoverBackground#dfe1ff59
  • list.inactiveSelectionBackground#dfe1ff73
  • panel.background#eeeff1
  • panel.border#e3e5e7
  • panelTitle.activeBorder#0075ff
  • panelTitle.activeForeground#0b0c0d
  • panelTitle.inactiveForeground#636c74
  • selection.background#dfe1ff
  • sideBar.background#eeeff1
  • sideBar.border#e3e5e7
  • sideBar.foreground#3e4347
  • sideBarSectionHeader.background#eeeff1
  • sideBarSectionHeader.border#e3e5e7
  • sideBarSectionHeader.foreground#3e4347
  • sideBarTitle.foreground#0b0c0d
  • statusBar.background#eeeff1
  • statusBar.border#e3e5e7
  • statusBar.debuggingBackground#ffc900
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#3e4347
  • statusBar.noFolderBackground#eeeff1
  • statusBarItem.remoteBackground#eeeff1
  • statusBarItem.remoteForeground#3e4347
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#0075ff
  • tab.activeForeground#0b0c0d
  • tab.border#e3e5e7
  • tab.inactiveBackground#eeeff1
  • tab.inactiveForeground#636c74
  • terminal.ansiBlack#18191a
  • terminal.ansiBlue#0075ff
  • terminal.ansiBrightBlack#18191a
  • 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#eeeff1
  • terminal.foreground#3e4347
  • terminal.titleForeground#3e4347
  • terminal.titleInactiveForeground#636c74
  • textLink.activeForeground#0075ff
  • textLink.foreground#0075ff
  • titleBar.activeBackground#eeeff1
  • titleBar.activeForeground#0b0c0d
  • titleBar.border#e3e5e7
  • titleBar.inactiveBackground#eeeff1
  • 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#13924c
punctuation.definition.string.begin, punctuation.definition.string.end#13924c
constant.numeric, constant.language.boolean#1a95cc
constant#d2a611
punctuation.definition.constant#d2a611
constant.language#1a95cc
variable.other.constant#d2a611
keyword#e12871
keyword.control#e12871
storage, storage.type, storage.modifier#e12871
token.storage#e12871
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#e12871
keyword.operator.delete#e12871
variable, identifier, meta.definition.variable#d2580a
variable.other.readwrite, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node#d2580a
variable.language#d2a611
variable.parameter.function#50575d
function.parameter#50575d
variable.parameter#50575d
variable.parameter.function.language.python#d2a611
variable.parameter.function.python#d2a611
support.function, entity.name.function, meta.function-call, meta.require, support.function.any-method, variable.function#7740ff
keyword.other.special-method#7740ff
entity.name.function#7740ff
support.function.console#7740ff
support.type, entity.name.type, entity.name.class, storage.type#8e3de8
support.class, entity.name.type.class#8e3de8
entity.name.class, variable.other.class.js, variable.other.class.ts#8e3de8
entity.name.class.identifier.namespace.type#8e3de8
entity.name.type.namespace#d2a611
entity.other.inherited-class#8e3de8
entity.name.namespace#d2a611
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#e12871
keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts#00b4f8
keyword.operator.ternary#e12871
keyword.operator.optional#e12871
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#7740ff
keyword.operator.module#e12871
support.type.object.console#d2580a
support.module.node, support.type.object.module, entity.name.type.module#d2a611
support.constant.math#d2a611
support.constant.property.math#d2a611
support.constant.json#d2a611
support.type.object.dom#00b4f8
support.variable.dom, support.variable.property.dom#d2580a
support.variable.property.process#d2a611
meta.property.object#d2580a
variable.parameter.function.js#d2580a
keyword.other.template.begin, keyword.other.template.end#13924c
keyword.other.substitution.begin, keyword.other.substitution.end#13924c
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#e12871
meta.template.expression#50575d
punctuation.section.embedded#d2580a
variable.interpolation#d2580a
punctuation.section.embedded.begin, punctuation.section.embedded.end#e12871
punctuation.quasi.element#e12871
support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx#8e3de8
support.type.type.flowtype#7740ff
support.type.primitive#8e3de8
support.variable.magic.python#be273a
variable.parameter.function.language.special.self.python#d2a611
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#e12871
meta.function-call.generic.python#7740ff
constant.character.format.placeholder.other.python#d2a611
meta.function.decorator.python#7740ff
support.token.decorator.python, meta.function.decorator.identifier.python#00b4f8
storage.modifier.lifetime.rust#50575d
support.function.std.rust#7740ff
entity.name.lifetime.rust#d2a611
variable.language.rust#be273a
keyword.operator.misc.rust#50575d
keyword.operator.sigil.rust#e12871
support.constant.core.rust#d2a611
meta.function.c, meta.function.cpp#be273a
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#e12871
keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.bitwise.shift.cpp#e12871
punctuation.separator.c, punctuation.separator.cpp#e12871
support.type.posix-reserved.c, support.type.posix-reserved.cpp#00b4f8
keyword.operator.sizeof.c, keyword.operator.sizeof.cpp#e12871
variable.c#50575d
storage.type.annotation.java, storage.type.object.array.java#d2a611
source.java#be273a
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#7740ff
storage.modifier.import.java, storage.type.java, storage.type.generic.java#d2a611
keyword.operator.instanceof.java#e12871
meta.definition.variable.name.java#be273a
token.variable.parameter.java#50575d
import.storage.java#d2a611
token.package.keyword#e12871
token.package#50575d
token.storage.type.java#d2a611
keyword.operator.assignment.go#d2a611
keyword.operator.arithmetic.go, keyword.operator.address.go#e12871
entity.name.package.go#d2a611
support.other.namespace.use.php, support.other.namespace.use-as.php, support.other.namespace.php, entity.other.alias.php, meta.interface.php#d2a611
keyword.operator.error-control.php#e12871
keyword.operator.type.php#e12871
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#d2a611
meta.function-call.php, meta.function-call.object.php, meta.function-call.static.php#7740ff
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#d2a611
entity.name.goto-label.php, support.other.php#7740ff
keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php#00b4f8
keyword.operator.regexp.php#e12871
keyword.operator.comparison.php#00b4f8
keyword.operator.heredoc.php, keyword.operator.nowdoc.php#e12871
variable.other.class.php#be273a
invalid.illegal.non-null-typehinted.php#f44747
variable.other.generic-type.haskell#e12871
storage.type.haskell#d2a611
storage.type.cs#d2a611
entity.name.variable.local.cs#be273a
entity.name.label.cs#d2a611
entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#d2a611
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#be273a
support.constant.edge#e12871
support.type.prelude.elm#00b4f8
support.constant.elm#d2a611
entity.global.clojure#d2a611
meta.symbol.clojure#be273a
constant.keyword.clojure#00b4f8
meta.arguments.coffee, variable.parameter.function.coffee#be273a
storage.modifier.import.groovy#d2a611
meta.method.groovy#7740ff
meta.definition.variable.name.groovy#be273a
meta.definition.class.inherited.classes.groovy#13924c
support.variable.semantic.hlsl#d2a611
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#e12871
text.variable, text.bracketed#be273a
support.type.swift, support.type.vb.asp#d2a611
meta.scope.prerequisites.makefile#be273a
source.makefile#d2a611
source.ini#13924c
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#e12871
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#e12871
entity.name.function.xi#d2a611
entity.name.class.xi#00b4f8
constant.character.character-class.regexp.xi#be273a
constant.regexp.xi#e12871
keyword.control.xi#00b4f8
invalid.xi#50575d
beginning.punctuation.definition.quote.markdown.xi#13924c
beginning.punctuation.definition.list.markdown.xi#636c74
constant.character.xi#7740ff
accent.xi#7740ff
wikiword.xi#d2a611
constant.other.color.rgb-value.xi#e62845
punctuation.definition.tag.xi#636c74
support.constant.property-value.scss, support.constant.property-value.css#d2a611
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#d2a611
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#d2a611
entity.other.attribute-name.class.css#169d96normal
entity.other.attribute-name.id#7740ffnormal
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#00b4f8
meta.selector#e12871
selector.sass#be273a
rgb-value#00b4f8
inline-color-decoration rgb-value#d2a611
less rgb-value#d2a611
control.elements#d2a611
keyword.operator.less#d2a611
entity.name.tag#be273a
entity.other.attribute-name#169d96normal
constant.character.entity#be273a
meta.tag#50575d
invalid.illegal.bad-ampersand.html#50575d
markup.heading#be273a
markup.heading punctuation.definition.heading, entity.name.section#7740ff
entity.name.section.markdown#be273a
punctuation.definition.heading.markdown#be273a
markup.heading.setext#50575d
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#be273a
markup.bold, todo.bold#d2a611
punctuation.definition.bold#d2a611
punctuation.definition.bold.markdown#d2a611
markup.italic, punctuation.definition.italic, todo.emphasis#e12871italic
emphasis md#e12871
markup.italic.markdownitalic
markup.underline.link.markdown, markup.underline.link.image.markdown#e12871
string.other.link.title.markdown, string.other.link.description.markdown#7740ff
punctuation.definition.metadata.markdown#be273a
markup.inline.raw.markdown, markup.inline.raw.string.markdown#13924c
punctuation.definition.list.begin.markdown#be273a
punctuation.definition.list.markdown#be273a
beginning.punctuation.definition.list.markdown#be273a
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#be273a
markup.quote.markdown#636c74
keyword.other.unit#be273a
markup.changed.diff#d2a611
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#7740ff
markup.inserted.diff#13924c
markup.deleted.diff#be273a
string.regexp#169d96
constant.other.character-class.regexp#be273a
keyword.operator.quantifier.regexp#d2a611
constant.character.escape#1a95cc
source.json meta.structure.dictionary.json > string.quoted.json#be273a
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#be273a
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#13924c
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#00b4f8
support.type.property-name.json#be273a
support.type.property-name.json punctuation#be273a
punctuation.definition.block.sequence.item.yaml#50575d
block.scope.end#50575d
block.scope.begin#50575d
token.info-token#7740ff
token.warn-token#d2a611
token.error-token#f44747
token.debug-token#e12871
invalid.illegal#e62845
invalid.broken#e62845
invalid.deprecated#e62845
invalid.unimplemented#e62845
Bootstrap Theme by Bootstrap - VS Code Theme