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#f7f7f7
  • activityBar.border#ededed
  • activityBar.foreground#525252
  • activityBarBadge.background#009fff
  • activityBarBadge.foreground#ffffff
  • button.background#009fff
  • button.foreground#ffffff
  • button.hoverBackground#1aa9ff
  • diffEditor.deletedTextBackground#ff2e3f33
  • diffEditor.insertedTextBackground#07c48033
  • dropdown.background#f5f5f5
  • dropdown.border#d4d4d4
  • dropdown.foreground#525252
  • editor.background#ffffff
  • editor.foreground#525252
  • editor.lineHighlightBackground#dfebff8c
  • editor.selectionBackground#009fff2e
  • editorCursor.foreground#009fff
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorGroupHeader.tabsBorder#ededed
  • editorIndentGuide.activeBackground#e5e5e5
  • editorIndentGuide.background#ededed
  • editorLineNumber.activeForeground#737373
  • editorLineNumber.foreground#8a8a8a
  • editorOverviewRuler.currentContentForeground#7b43f8
  • editorOverviewRuler.incomingContentForeground#08c0ef
  • focusBorder#009fff
  • foreground#525252
  • gitDecoration.addedResourceForeground#07c480
  • gitDecoration.conflictingResourceForeground#7b43f8
  • gitDecoration.deletedResourceForeground#ff2e3f
  • gitDecoration.ignoredResourceForeground#8a8a8a
  • gitDecoration.modifiedResourceForeground#009fff
  • gitDecoration.untrackedResourceForeground#07c480
  • input.background#f5f5f5
  • input.border#d4d4d4
  • input.foreground#525252
  • input.placeholderForeground#a3a3a3
  • list.activeSelectionBackground#dfebffcc
  • list.activeSelectionForeground#525252
  • list.focusOutline#009fff
  • list.hoverBackground#dfebff59
  • list.inactiveSelectionBackground#dfebff73
  • merge.currentContentBackground#7b43f814
  • merge.currentHeaderBackground#7b43f833
  • merge.incomingContentBackground#08c0ef14
  • merge.incomingHeaderBackground#08c0ef33
  • notificationCenter.border#e5e5e5
  • notificationCenterHeader.background#fafafa
  • notificationCenterHeader.foreground#737373
  • notificationLink.foreground#009fff
  • notifications.background#fafafa
  • notifications.border#e5e5e5
  • notifications.foreground#525252
  • notificationsErrorIcon.foreground#ff2e3f
  • notificationsInfoIcon.foreground#08c0ef
  • notificationsWarningIcon.foreground#ffca00
  • notificationToast.border#e5e5e5
  • panel.background#f7f7f7
  • panel.border#ededed
  • panelTitle.activeBorder#009fff
  • panelTitle.activeForeground#525252
  • panelTitle.inactiveForeground#8a8a8a
  • quickInput.background#fafafa
  • quickInput.foreground#525252
  • quickInputTitle.background#fafafa
  • selection.background#dfebff
  • sideBar.background#f7f7f7
  • sideBar.border#ededed
  • sideBar.foreground#737373
  • sideBarSectionHeader.background#f7f7f7
  • sideBarSectionHeader.border#ededed
  • sideBarSectionHeader.foreground#737373
  • sideBarTitle.foreground#525252
  • statusBar.background#f7f7f7
  • statusBar.border#ededed
  • statusBar.debuggingBackground#ffca00
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#737373
  • statusBar.noFolderBackground#f7f7f7
  • statusBarItem.remoteBackground#f7f7f7
  • statusBarItem.remoteForeground#737373
  • tab.activeBackground#ffffff
  • tab.activeBorderTop#009fff
  • tab.activeForeground#525252
  • tab.border#ededed
  • tab.inactiveBackground#f7f7f7
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlack#1d1d1d
  • terminal.ansiBlue#009fff
  • terminal.ansiBrightBlack#1d1d1d
  • 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#f7f7f7
  • terminal.foreground#737373
  • terminal.titleForeground#737373
  • terminal.titleInactiveForeground#8a8a8a
  • textLink.activeForeground#009fff
  • textLink.foreground#009fff
  • titleBar.activeBackground#f7f7f7
  • titleBar.activeForeground#525252
  • titleBar.border#ededed
  • titleBar.inactiveBackground#f7f7f7
  • titleBar.inactiveForeground#8a8a8a
  • widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8a8a8a
comment markup.link#8a8a8a
string, constant.other.symbol#0dbe4e
punctuation.definition.string.begin, punctuation.definition.string.end#0dbe4e
constant.numeric, constant.language.boolean#08c0ef
constant#ffca00
punctuation.definition.constant#ffca00
constant.language#08c0ef
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#fe8c2c
variable.other.readwrite, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node#fe8c2c
variable.language#ffab16
variable.parameter.function#737373
function.parameter#737373
variable.parameter#737373
variable.parameter.function.language.python#ffca00
variable.parameter.function.python#ffca00
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#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#ff678d
keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts#68cdf2
keyword.operator.ternary#ff678d
keyword.operator.optional#ff678d
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#9d6afb
keyword.operator.module#ff678d
support.type.object.console#fe8c2c
support.module.node, support.type.object.module, entity.name.type.module#ffab16
support.constant.math#ffab16
support.constant.property.math#ffca00
support.constant.json#ffca00
support.type.object.dom#68cdf2
support.variable.dom, support.variable.property.dom#fe8c2c
support.variable.property.process#ffca00
meta.property.object#fe8c2c
variable.parameter.function.js#fe8c2c
keyword.other.template.begin, keyword.other.template.end#0dbe4e
keyword.other.substitution.begin, keyword.other.substitution.end#0dbe4e
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ff678d
meta.template.expression#737373
punctuation.section.embedded#fe8c2c
variable.interpolation#fe8c2c
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#ff5d36
variable.parameter.function.language.special.self.python#ffab16
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#ff678d
meta.function-call.generic.python#9d6afb
constant.character.format.placeholder.other.python#ffca00
meta.function.decorator.python#9d6afb
support.token.decorator.python, meta.function.decorator.identifier.python#68cdf2
storage.modifier.lifetime.rust#737373
support.function.std.rust#9d6afb
entity.name.lifetime.rust#ffab16
variable.language.rust#ff5d36
keyword.operator.misc.rust#737373
keyword.operator.sigil.rust#ff678d
support.constant.core.rust#ffca00
meta.function.c, meta.function.cpp#ff5d36
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#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#68cdf2
keyword.operator.sizeof.c, keyword.operator.sizeof.cpp#ff678d
variable.c#737373
storage.type.annotation.java, storage.type.object.array.java#ffab16
source.java#ff5d36
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#9d6afb
storage.modifier.import.java, storage.type.java, storage.type.generic.java#ffab16
keyword.operator.instanceof.java#ff678d
meta.definition.variable.name.java#ff5d36
token.variable.parameter.java#737373
import.storage.java#ffab16
token.package.keyword#ff678d
token.package#737373
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#737373
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#737373
support.constant.ext.php, support.constant.std.php, support.constant.core.php, support.constant.parser-token.php#ffca00
entity.name.goto-label.php, support.other.php#9d6afb
keyword.operator.logical.php, keyword.operator.bitwise.php, keyword.operator.arithmetic.php#68cdf2
keyword.operator.regexp.php#ff678d
keyword.operator.comparison.php#68cdf2
keyword.operator.heredoc.php, keyword.operator.nowdoc.php#ff678d
variable.other.class.php#ff5d36
invalid.illegal.non-null-typehinted.php#171717
variable.other.generic-type.haskell#ff678d
storage.type.haskell#ffca00
storage.type.cs#ffab16
entity.name.variable.local.cs#ff5d36
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#ff5d36
support.constant.edge#ff678d
support.type.prelude.elm#68cdf2
support.constant.elm#ffca00
entity.global.clojure#ffab16
meta.symbol.clojure#ff5d36
constant.keyword.clojure#68cdf2
meta.arguments.coffee, variable.parameter.function.coffee#ff5d36
storage.modifier.import.groovy#ffab16
meta.method.groovy#9d6afb
meta.definition.variable.name.groovy#ff5d36
meta.definition.class.inherited.classes.groovy#0dbe4e
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#ff5d36
support.type.swift, support.type.vb.asp#ffab16
meta.scope.prerequisites.makefile#ff5d36
source.makefile#ffab16
source.ini#0dbe4e
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#ff678d
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#ff678d
entity.name.function.xi#ffab16
entity.name.class.xi#68cdf2
constant.character.character-class.regexp.xi#ff5d36
constant.regexp.xi#ff678d
keyword.control.xi#68cdf2
invalid.xi#737373
beginning.punctuation.definition.quote.markdown.xi#0dbe4e
beginning.punctuation.definition.list.markdown.xi#8a8a8a
constant.character.xi#9d6afb
accent.xi#9d6afb
wikiword.xi#ffca00
constant.other.color.rgb-value.xi#171717
punctuation.definition.tag.xi#8a8a8a
support.constant.property-value.scss, support.constant.property-value.css#ffca00
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#ffca00
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#ffca00
entity.other.attribute-name.class.css#07c480normal
entity.other.attribute-name.id#9d6afbnormal
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#68cdf2
meta.selector#ff678d
selector.sass#ff5d36
rgb-value#68cdf2
inline-color-decoration rgb-value#ffca00
less rgb-value#ffca00
control.elements#ffca00
keyword.operator.less#ffca00
entity.name.tag#ff5d36
entity.other.attribute-name#07c480normal
constant.character.entity#ff5d36
meta.tag#737373
invalid.illegal.bad-ampersand.html#737373
markup.heading#ff5d36
markup.heading punctuation.definition.heading, entity.name.section#9d6afb
entity.name.section.markdown#ff5d36
punctuation.definition.heading.markdown#ff5d36
markup.heading.setext#737373
markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff5d36
markup.bold, todo.bold#ffca00
punctuation.definition.bold#ffab16
punctuation.definition.bold.markdown#ffca00
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#ff5d36
markup.inline.raw.markdown, markup.inline.raw.string.markdown#0dbe4e
punctuation.definition.list.begin.markdown#ff5d36
punctuation.definition.list.markdown#ff5d36
beginning.punctuation.definition.list.markdown#ff5d36
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff5d36
markup.quote.markdown#8a8a8a
keyword.other.unit#ff5d36
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#0dbe4e
markup.deleted.diff#ff5d36
string.regexp#00c5d2
constant.other.character-class.regexp#ff5d36
keyword.operator.quantifier.regexp#ffca00
constant.character.escape#00cab1
source.json meta.structure.dictionary.json > string.quoted.json#ff5d36
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ff5d36
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#0dbe4e
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#68cdf2
support.type.property-name.json#ff5d36
support.type.property-name.json punctuation#ff5d36
punctuation.definition.block.sequence.item.yaml#737373
block.scope.end#737373
block.scope.begin#737373
token.info-token#9d6afb
token.warn-token#ffca00
token.error-token#171717
token.debug-token#ff678d
invalid.illegal#171717
invalid.broken#171717
invalid.deprecated#171717
invalid.unimplemented#171717
Pierre Theme by The Pierre Computer Co - VS Code Theme