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#171717
  • activityBar.border#0a0a0a
  • activityBar.foreground#fafafa
  • activityBarBadge.background#009fff
  • activityBarBadge.foreground#0a0a0a
  • button.background#009fff
  • button.foreground#0a0a0a
  • button.hoverBackground#0190e7
  • diffEditor.deletedTextBackground#ff2e3f1a
  • diffEditor.insertedTextBackground#07c4801a
  • dropdown.background#1d1d1d
  • dropdown.border#1d1d1d
  • dropdown.foreground#fafafa
  • editor.background#0a0a0a
  • editor.foreground#fafafa
  • editor.lineHighlightBackground#19283c8c
  • editor.selectionBackground#009fff4d
  • editorCursor.foreground#009fff
  • editorGroupHeader.tabsBackground#171717
  • editorGroupHeader.tabsBorder#0a0a0a
  • editorIndentGuide.activeBackground#262626
  • editorIndentGuide.background#1d1d1d
  • editorLineNumber.activeForeground#a3a3a3
  • editorLineNumber.foreground#737373
  • editorOverviewRuler.currentContentForeground#7b43f8
  • editorOverviewRuler.incomingContentForeground#08c0ef
  • focusBorder#009fff
  • foreground#fafafa
  • gitDecoration.addedResourceForeground#07c480
  • gitDecoration.conflictingResourceForeground#7b43f8
  • gitDecoration.deletedResourceForeground#ff2e3f
  • gitDecoration.ignoredResourceForeground#737373
  • gitDecoration.modifiedResourceForeground#009fff
  • gitDecoration.untrackedResourceForeground#07c480
  • input.background#1d1d1d
  • input.border#1d1d1d
  • input.foreground#fafafa
  • input.placeholderForeground#636363
  • list.activeSelectionBackground#19283c99
  • list.activeSelectionForeground#fafafa
  • list.focusOutline#009fff
  • list.hoverBackground#19283c59
  • list.inactiveSelectionBackground#19283c73
  • merge.currentContentBackground#7b43f81f
  • merge.currentHeaderBackground#7b43f84d
  • merge.incomingContentBackground#08c0ef1f
  • merge.incomingHeaderBackground#08c0ef4d
  • notificationCenter.border#1d1d1d
  • notificationCenterHeader.background#101010
  • notificationCenterHeader.foreground#a3a3a3
  • notificationLink.foreground#009fff
  • notifications.background#101010
  • notifications.border#1d1d1d
  • notifications.foreground#fafafa
  • notificationsErrorIcon.foreground#ff2e3f
  • notificationsInfoIcon.foreground#08c0ef
  • notificationsWarningIcon.foreground#ffca00
  • notificationToast.border#1d1d1d
  • panel.background#171717
  • panel.border#0a0a0a
  • panelTitle.activeBorder#009fff
  • panelTitle.activeForeground#fafafa
  • panelTitle.inactiveForeground#737373
  • quickInput.background#101010
  • quickInput.foreground#fafafa
  • quickInputTitle.background#101010
  • selection.background#19283c
  • sideBar.background#171717
  • sideBar.border#0a0a0a
  • sideBar.foreground#a3a3a3
  • sideBarSectionHeader.background#171717
  • sideBarSectionHeader.border#0a0a0a
  • sideBarSectionHeader.foreground#a3a3a3
  • sideBarTitle.foreground#fafafa
  • statusBar.background#171717
  • statusBar.border#0a0a0a
  • statusBar.debuggingBackground#ffca00
  • statusBar.debuggingForeground#0a0a0a
  • statusBar.foreground#a3a3a3
  • statusBar.noFolderBackground#171717
  • statusBarItem.remoteBackground#171717
  • statusBarItem.remoteForeground#a3a3a3
  • tab.activeBackground#0a0a0a
  • tab.activeBorderTop#009fff
  • tab.activeForeground#fafafa
  • tab.border#0a0a0a
  • tab.inactiveBackground#171717
  • tab.inactiveForeground#737373
  • 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#171717
  • terminal.foreground#a3a3a3
  • terminal.titleForeground#a3a3a3
  • terminal.titleInactiveForeground#737373
  • textLink.activeForeground#009fff
  • textLink.foreground#009fff
  • titleBar.activeBackground#171717
  • titleBar.activeForeground#fafafa
  • titleBar.border#0a0a0a
  • titleBar.inactiveBackground#171717
  • titleBar.inactiveForeground#737373
  • widget.border#1d1d1d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#737373
comment markup.link#737373
string, constant.other.symbol#5ecc71
punctuation.definition.string.begin, punctuation.definition.string.end#5ecc71
constant.numeric, constant.language.boolean#68cdf2
constant#ffd452
punctuation.definition.constant#ffd452
constant.language#68cdf2
variable.other.constant#ffab16
keyword#ff678d
keyword.control#ff678d
storage, storage.type, storage.modifier#ff678d
token.storage#ff678d
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#ff678d
keyword.operator.delete#ff678d
variable, identifier, meta.definition.variable#ffa359
variable.other.readwrite, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node#ffa359
variable.language#ffab16
variable.parameter.function#a3a3a3
function.parameter#a3a3a3
variable.parameter#a3a3a3
variable.parameter.function.language.python#ffd452
variable.parameter.function.python#ffd452
support.function, entity.name.function, meta.function-call, meta.require, support.function.any-method, variable.function#9d6afb
keyword.other.special-method#9d6afb
entity.name.function#9d6afb
support.function.console#9d6afb
support.type, entity.name.type, entity.name.class, storage.type#d568ea
support.class, entity.name.type.class#d568ea
entity.name.class, variable.other.class.js, variable.other.class.ts#d568ea
entity.name.class.identifier.namespace.type#d568ea
entity.name.type.namespace#ffab16
entity.other.inherited-class#d568ea
entity.name.namespace#ffab16
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#ff678d
keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts#08c0ef
keyword.operator.ternary#ff678d
keyword.operator.optional#ff678d
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#9d6afb
keyword.operator.module#ff678d
support.type.object.console#ffa359
support.module.node, support.type.object.module, entity.name.type.module#ffab16
support.constant.math#ffab16
support.constant.property.math#ffd452
support.constant.json#ffd452
support.type.object.dom#08c0ef
support.variable.dom, support.variable.property.dom#ffa359
support.variable.property.process#ffd452
meta.property.object#ffa359
variable.parameter.function.js#ffa359
keyword.other.template.begin, keyword.other.template.end#5ecc71
keyword.other.substitution.begin, keyword.other.substitution.end#5ecc71
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff678d
meta.template.expression#636363
punctuation.section.embedded#ffa359
variable.interpolation#ffa359
punctuation.section.embedded.begin, punctuation.section.embedded.end#ff678d
punctuation.quasi.element#ff678d
support.type.primitive.ts, support.type.builtin.ts, support.type.primitive.tsx, support.type.builtin.tsx#d568ea
support.type.type.flowtype#9d6afb
support.type.primitive#d568ea
meta.decorator, meta.decorator punctuation.decorator#69b1ff
entity.name.function.decorator#69b1ff
punctuation.definition.decorator#69b1ff
support.variable.magic.python#ff855e
variable.parameter.function.language.special.self.python#ffab16
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#ff678d
meta.function-call.generic.python#9d6afb
constant.character.format.placeholder.other.python#ffd452
meta.function.decorator.python#9d6afb
support.token.decorator.python, meta.function.decorator.identifier.python#08c0ef
storage.modifier.lifetime.rust#636363
support.function.std.rust#9d6afb
entity.name.lifetime.rust#ffab16
variable.language.rust#ff855e
keyword.operator.misc.rust#636363
keyword.operator.sigil.rust#ff678d
support.constant.core.rust#ffd452
meta.function.c, meta.function.cpp#ff855e
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#ff678d
keyword.operator.assignment.cpp, keyword.operator.comparison.cpp, keyword.operator.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.bitwise.shift.cpp#ff678d
punctuation.separator.c, punctuation.separator.cpp#ff678d
support.type.posix-reserved.c, support.type.posix-reserved.cpp#08c0ef
keyword.operator.sizeof.c, keyword.operator.sizeof.cpp#ff678d
variable.c#636363
storage.type.annotation.java, storage.type.object.array.java#ffab16
source.java#ff855e
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#9d6afb
storage.modifier.import.java, storage.type.java, storage.type.generic.java#ffab16
keyword.operator.instanceof.java#ff678d
meta.definition.variable.name.java#ff855e
token.variable.parameter.java#636363
import.storage.java#ffab16
token.package.keyword#ff678d
token.package#636363
token.storage.type.java#ffab16
keyword.operator.assignment.go#ffab16
keyword.operator.arithmetic.go, keyword.operator.address.go#ff678d
entity.name.package.go#ffab16
support.other.namespace.use.php, support.other.namespace.use-as.php, support.other.namespace.php, entity.other.alias.php, meta.interface.php#ffab16
keyword.operator.error-control.php#ff678d
keyword.operator.type.php#ff678d
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#ffab16
meta.function-call.php, meta.function-call.object.php, meta.function-call.static.php#9d6afb
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#ffd452
entity.name.goto-label.php, support.other.php#9d6afb
keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php#08c0ef
keyword.operator.regexp.php#ff678d
keyword.operator.comparison.php#08c0ef
keyword.operator.heredoc.php, keyword.operator.nowdoc.php#ff678d
variable.other.class.php#ff855e
invalid.illegal.non-null-typehinted.php#fafafa
variable.other.generic-type.haskell#ff678d
storage.type.haskell#ffd452
storage.type.cs#ffab16
entity.name.variable.local.cs#ff855e
entity.name.label.cs#ffab16
entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#ffab16
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#ff855e
support.constant.edge#ff678d
support.type.prelude.elm#08c0ef
support.constant.elm#ffd452
entity.global.clojure#ffab16
meta.symbol.clojure#ff855e
constant.keyword.clojure#08c0ef
meta.arguments.coffee, variable.parameter.function.coffee#ff855e
storage.modifier.import.groovy#ffab16
meta.method.groovy#9d6afb
meta.definition.variable.name.groovy#ff855e
meta.definition.class.inherited.classes.groovy#5ecc71
support.variable.semantic.hlsl#ffab16
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#ff678d
text.variable, text.bracketed#ff855e
support.type.swift, support.type.vb.asp#ffab16
meta.scope.prerequisites.makefile#ff855e
source.makefile#ffab16
source.ini#5ecc71
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#ff678d
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#ff678d
entity.name.function.xi#ffab16
entity.name.class.xi#08c0ef
constant.character.character-class.regexp.xi#ff855e
constant.regexp.xi#ff678d
keyword.control.xi#08c0ef
invalid.xi#636363
beginning.punctuation.definition.quote.markdown.xi#5ecc71
beginning.punctuation.definition.list.markdown.xi#737373
constant.character.xi#9d6afb
accent.xi#9d6afb
wikiword.xi#ffd452
constant.other.color.rgb-value.xi#fafafa
punctuation.definition.tag.xi#737373
support.constant.property-value.scss, support.constant.property-value.css#ffd452
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#ffd452
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#ffd452
entity.other.attribute-name.class.css#60d199normal
entity.other.attribute-name.id#9d6afbnormal
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#08c0ef
meta.selector#ff678d
selector.sass#ff855e
rgb-value#08c0ef
inline-color-decoration rgb-value#ffd452
less rgb-value#ffd452
control.elements#ffd452
keyword.operator.less#ffd452
entity.name.tag#ff855e
entity.other.attribute-name#60d199normal
constant.character.entity#ff855e
meta.tag#636363
invalid.illegal.bad-ampersand.html#636363
markup.heading#ff855e
markup.heading punctuation.definition.heading, entity.name.section#9d6afb
entity.name.section.markdown#ff855e
punctuation.definition.heading.markdown#ff855e
markup.heading.setext#636363
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff855e
markup.bold, todo.bold#ffd452
punctuation.definition.bold#ffab16
punctuation.definition.bold.markdown#ffd452
markup.italic, punctuation.definition.italic, todo.emphasis#ff678ditalic
emphasis md#ff678d
markup.italic.markdownitalic
markup.underline.link.markdown, markup.underline.link.image.markdown#ff678d
string.other.link.title.markdown, string.other.link.description.markdown#9d6afb
punctuation.definition.metadata.markdown#ff855e
markup.inline.raw.markdown, markup.inline.raw.string.markdown#5ecc71
punctuation.definition.list.begin.markdown#ff855e
punctuation.definition.list.markdown#ff855e
beginning.punctuation.definition.list.markdown#ff855e
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff855e
markup.quote.markdown#737373
keyword.other.unit#ff855e
markup.changed.diff#ffab16
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#9d6afb
markup.inserted.diff#5ecc71
markup.deleted.diff#ff855e
string.regexp#64d1db
constant.other.character-class.regexp#ff855e
keyword.operator.quantifier.regexp#ffd452
constant.character.escape#61d5c0
source.json meta.structure.dictionary.json > string.quoted.json#ff855e
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ff855e
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#5ecc71
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#08c0ef
support.type.property-name.json#ff855e
support.type.property-name.json punctuation#ff855e
punctuation.definition.block.sequence.item.yaml#636363
block.scope.end#636363
block.scope.begin#636363
token.info-token#9d6afb
token.warn-token#ffd452
token.error-token#fafafa
token.debug-token#ff678d
invalid.illegal#fafafa
invalid.broken#fafafa
invalid.deprecated#fafafa
invalid.unimplemented#fafafa
Pierre Theme by The Pierre Computer Co - VS Code Theme