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#009fff
  • activityBar.background#f5f5f5
  • activityBar.border#e5e5e5
  • activityBar.foreground#0a0a0a
  • activityBarBadge.background#009fff
  • activityBarBadge.foreground#ffffff
  • button.background#009fff
  • button.foreground#ffffff
  • button.hoverBackground#1aa9ff
  • diffEditor.deletedTextBackground#d52c3633
  • diffEditor.insertedTextBackground#18a46c33
  • dropdown.background#ededed
  • dropdown.border#d4d4d4
  • dropdown.foreground#0a0a0a
  • editor.background#ffffff
  • editor.foreground#0a0a0a
  • editor.lineHighlightBackground#dfebff8c
  • editor.selectionBackground#009fff2e
  • editorCursor.foreground#009fff
  • editorGroupHeader.tabsBackground#f5f5f5
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorIndentGuide.activeBackground#d4d4d4
  • editorIndentGuide.background#e5e5e5
  • editorLineNumber.activeForeground#525252
  • editorLineNumber.foreground#737373
  • editorOverviewRuler.currentContentForeground#693acf
  • editorOverviewRuler.incomingContentForeground#1ca1c7
  • focusBorder#009fff
  • foreground#0a0a0a
  • gitDecoration.addedResourceForeground#18a46c
  • gitDecoration.conflictingResourceForeground#693acf
  • gitDecoration.deletedResourceForeground#d52c36
  • gitDecoration.ignoredResourceForeground#737373
  • gitDecoration.modifiedResourceForeground#009fff
  • gitDecoration.untrackedResourceForeground#18a46c
  • input.background#ededed
  • input.border#d4d4d4
  • input.foreground#0a0a0a
  • input.placeholderForeground#8a8a8a
  • list.activeSelectionBackground#dfebffcc
  • list.activeSelectionForeground#0a0a0a
  • list.focusOutline#009fff
  • list.hoverBackground#dfebff59
  • list.inactiveSelectionBackground#dfebff73
  • merge.currentContentBackground#693acf14
  • merge.currentHeaderBackground#693acf33
  • merge.incomingContentBackground#1ca1c714
  • merge.incomingHeaderBackground#1ca1c733
  • notificationCenter.border#e5e5e5
  • notificationCenterHeader.background#f7f7f7
  • notificationCenterHeader.foreground#525252
  • notificationLink.foreground#009fff
  • notifications.background#f7f7f7
  • notifications.border#e5e5e5
  • notifications.foreground#0a0a0a
  • notificationsErrorIcon.foreground#d52c36
  • notificationsInfoIcon.foreground#1ca1c7
  • notificationsWarningIcon.foreground#d5a910
  • notificationToast.border#e5e5e5
  • panel.background#f5f5f5
  • panel.border#e5e5e5
  • panelTitle.activeBorder#009fff
  • panelTitle.activeForeground#0a0a0a
  • panelTitle.inactiveForeground#737373
  • quickInput.background#f7f7f7
  • quickInput.foreground#0a0a0a
  • quickInputTitle.background#f7f7f7
  • selection.background#dfebff
  • sideBar.background#f5f5f5
  • sideBar.border#e5e5e5
  • sideBar.foreground#525252
  • sideBarSectionHeader.background#f5f5f5
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#525252
  • sideBarTitle.foreground#0a0a0a
  • statusBar.background#f5f5f5
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#d5a910
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#525252
  • statusBar.noFolderBackground#f5f5f5
  • statusBarItem.remoteBackground#f5f5f5
  • statusBarItem.remoteForeground#525252
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#009fff
  • tab.activeForeground#0a0a0a
  • tab.border#e5e5e5
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#737373
  • terminal.ansiBlack#1d1d1d
  • terminal.ansiBlue#1a85d4
  • terminal.ansiBrightBlack#1d1d1d
  • terminal.ansiBrightBlue#1a85d4
  • terminal.ansiBrightCyan#1ca1c7
  • terminal.ansiBrightGreen#77a42a
  • terminal.ansiBrightMagenta#bd2e90
  • terminal.ansiBrightRed#d52c36
  • terminal.ansiBrightWhite#bcbcbc
  • terminal.ansiBrightYellow#d5a910
  • terminal.ansiCyan#1ca1c7
  • terminal.ansiGreen#18a46c
  • terminal.ansiMagenta#bd2e90
  • terminal.ansiRed#d52c36
  • terminal.ansiWhite#bcbcbc
  • terminal.ansiYellow#d5a910
  • terminal.background#f5f5f5
  • terminal.foreground#525252
  • terminal.titleForeground#525252
  • terminal.titleInactiveForeground#737373
  • textLink.activeForeground#009fff
  • textLink.foreground#009fff
  • titleBar.activeBackground#f5f5f5
  • titleBar.activeForeground#0a0a0a
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f5f5f5
  • titleBar.inactiveForeground#737373
  • widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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