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#69b1ff
  • activityBar.background#101010
  • activityBar.border#1d1d1d
  • activityBar.foreground#d4d4d4
  • activityBarBadge.background#69b1ff
  • activityBarBadge.foreground#171717
  • button.background#69b1ff
  • button.foreground#171717
  • button.hoverBackground#61a2e8
  • diffEditor.deletedTextBackground#ff67621a
  • diffEditor.insertedTextBackground#60d1991a
  • dropdown.background#262626
  • dropdown.border#2c2c2c
  • dropdown.foreground#d4d4d4
  • editor.background#171717
  • editor.foreground#d4d4d4
  • editor.lineHighlightBackground#1f3e5e8c
  • editor.selectionBackground#69b1ff4d
  • editorCursor.foreground#69b1ff
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#1d1d1d
  • editorIndentGuide.activeBackground#2c2c2c
  • editorIndentGuide.background#262626
  • editorLineNumber.activeForeground#8a8a8a
  • editorLineNumber.foreground#636363
  • editorOverviewRuler.currentContentForeground#9d6afb
  • editorOverviewRuler.incomingContentForeground#68cdf2
  • focusBorder#69b1ff
  • foreground#d4d4d4
  • gitDecoration.addedResourceForeground#60d199
  • gitDecoration.conflictingResourceForeground#9d6afb
  • gitDecoration.deletedResourceForeground#ff6762
  • gitDecoration.ignoredResourceForeground#636363
  • gitDecoration.modifiedResourceForeground#69b1ff
  • gitDecoration.untrackedResourceForeground#60d199
  • input.background#262626
  • input.border#2c2c2c
  • input.foreground#d4d4d4
  • input.placeholderForeground#525252
  • list.activeSelectionBackground#1f3e5e99
  • list.activeSelectionForeground#d4d4d4
  • list.focusOutline#69b1ff
  • list.hoverBackground#1f3e5e59
  • list.inactiveSelectionBackground#1f3e5e73
  • merge.currentContentBackground#9d6afb1f
  • merge.currentHeaderBackground#9d6afb4d
  • merge.incomingContentBackground#68cdf21f
  • merge.incomingHeaderBackground#68cdf24d
  • notificationCenter.border#262626
  • notificationCenterHeader.background#1d1d1d
  • notificationCenterHeader.foreground#8a8a8a
  • notificationLink.foreground#69b1ff
  • notifications.background#1d1d1d
  • notifications.border#262626
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#ff6762
  • notificationsInfoIcon.foreground#68cdf2
  • notificationsWarningIcon.foreground#ffd452
  • notificationToast.border#262626
  • panel.background#101010
  • panel.border#1d1d1d
  • panelTitle.activeBorder#69b1ff
  • panelTitle.activeForeground#d4d4d4
  • panelTitle.inactiveForeground#636363
  • quickInput.background#1d1d1d
  • quickInput.foreground#d4d4d4
  • quickInputTitle.background#1d1d1d
  • selection.background#1f3e5e
  • sideBar.background#101010
  • sideBar.border#1d1d1d
  • sideBar.foreground#8a8a8a
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#1d1d1d
  • sideBarSectionHeader.foreground#8a8a8a
  • sideBarTitle.foreground#d4d4d4
  • statusBar.background#101010
  • statusBar.border#1d1d1d
  • statusBar.debuggingBackground#ffd452
  • statusBar.debuggingForeground#171717
  • statusBar.foreground#8a8a8a
  • statusBar.noFolderBackground#101010
  • statusBarItem.remoteBackground#101010
  • statusBarItem.remoteForeground#8a8a8a
  • tab.activeBackground#171717
  • tab.activeBorderTop#69b1ff
  • tab.activeForeground#d4d4d4
  • tab.border#1d1d1d
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#636363
  • terminal.ansiBlack#171717
  • terminal.ansiBlue#009fff
  • terminal.ansiBrightBlack#171717
  • terminal.ansiBrightBlue#009fff
  • terminal.ansiBrightCyan#08c0ef
  • terminal.ansiBrightGreen#86c427
  • terminal.ansiBrightMagenta#e130ac
  • terminal.ansiBrightRed#ff2e3f
  • terminal.ansiBrightWhite#bcbcbc
  • terminal.ansiBrightYellow#ffca00
  • terminal.ansiCyan#08c0ef
  • terminal.ansiGreen#0dbe4e
  • terminal.ansiMagenta#e130ac
  • terminal.ansiRed#ff2e3f
  • terminal.ansiWhite#bcbcbc
  • terminal.ansiYellow#ffca00
  • terminal.background#101010
  • terminal.foreground#8a8a8a
  • terminal.titleForeground#8a8a8a
  • terminal.titleInactiveForeground#636363
  • textLink.activeForeground#69b1ff
  • textLink.foreground#69b1ff
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#d4d4d4
  • titleBar.border#1d1d1d
  • titleBar.inactiveBackground#101010
  • titleBar.inactiveForeground#636363
  • widget.border#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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