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.

  • actionBar.toggledBackground#E0E0E0
  • activityBar.background#FFFFFF
  • activityBar.foreground#424242
  • activityBarBadge.background#C2185B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FFFFFF
  • button.background#E0E0E0
  • button.secondaryBackground#E0E0E0
  • button.secondaryForeground#424242
  • checkbox.border#E0E0E0
  • debugToolBar.background#FFFFFF
  • descriptionForeground#424242
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#FFFFFF
  • dropdown.border#FFFFFF
  • editor.background#FFFFFF
  • editor.findMatchBackground#C2185B40
  • editor.findMatchBorder#4242425A
  • editor.findMatchHighlightBackground#42424222
  • editor.foreground#424242
  • editor.lineHighlightBackground#F5F5F5
  • editor.selectionBackground#75757530
  • editor.selectionHighlightBackground#FBC02D44
  • editor.selectionHighlightBorder#424242
  • editor.wordHighlightBackground#388E3C1E
  • editor.wordHighlightBorder#757575
  • editor.wordHighlightStrongBackground#42424226
  • editor.wordHighlightStrongBorder#757575
  • editorBracketHighlight.foreground1#C2185B
  • editorBracketHighlight.foreground2#7B1FA2
  • editorBracketHighlight.foreground3#0277BD
  • editorBracketMatch.background#E0E0E0
  • editorBracketMatch.border#E0E0E0
  • editorCursor.background#424242C9
  • editorCursor.foreground#0277BD
  • editorError.foreground#D32F2F
  • editorGroup.background#F5F5F5
  • editorGroup.border#F5F5F5
  • editorGroupHeader.tabsBackground#FFFFFF
  • editorGutter.addedBackground#388E3C
  • editorGutter.deletedBackground#C2185B
  • editorGutter.modifiedBackground#FBC02D
  • editorHoverWidget.background#FFFFFF
  • editorHoverWidget.border#E0E0E0
  • editorHoverWidget.highlightForeground#0277BD
  • editorIndentGuide.activeBackground1#BDBDBD
  • editorIndentGuide.background1#E0E0E0
  • editorInlayHint.background#F5F5F5
  • editorInlayHint.foreground#424242
  • editorLineNumber.activeForeground#424242
  • editorLineNumber.foreground#757575
  • editorMarkerNavigation.background#FFFFFF
  • editorOverviewRuler.addedBackground#388E3C
  • editorOverviewRuler.deletedBackground#C2185B
  • editorOverviewRuler.modifiedBackground#FBC02D
  • editorRuler.foreground#42424226
  • editorSuggestWidget.background#FFFFFF
  • editorSuggestWidget.border#E0E0E0
  • editorSuggestWidget.selectedBackground#F5F5F5
  • editorWarning.foreground#C2185B
  • editorWhitespace.foreground#4242421D
  • editorWidget.background#FFFFFF
  • focusBorder#3E4452
  • gitDecoration.ignoredResourceForeground#9E9E9E
  • input.background#F5F5F5
  • input.foreground#424242
  • list.activeSelectionBackground#E0E0E0
  • list.activeSelectionForeground#424242
  • list.focusBackground#F5F5F5
  • list.focusForeground#212121
  • list.highlightForeground#212121
  • list.hoverBackground#E0E0E0
  • list.hoverForeground#424242
  • list.inactiveSelectionBackground#F5F5F5
  • list.inactiveSelectionForeground#424242
  • list.warningForeground#C2185B
  • menu.foreground#424242
  • menu.separatorBackground#BDBDBD
  • minimapGutter.addedBackground#388E3C
  • minimapGutter.deletedBackground#C2185B
  • minimapGutter.modifiedBackground#FBC02D
  • multiDiffEditor.headerBackground#FFFFFF
  • panel.border#3E4452
  • panelSectionHeader.background#FFFFFF
  • peekViewEditor.background#F5F5F5
  • peekViewEditor.matchHighlightBackground#E0E0E0
  • peekViewResult.background#EEEEEE
  • scrollbar.shadow#F5F5F5
  • scrollbarSlider.activeBackground#BDBDBD80
  • scrollbarSlider.background#9E9E9E66
  • scrollbarSlider.hoverBackground#75757580
  • settings.focusedRowBackground#FFFFFF
  • settings.headerForeground#212121
  • sideBar.background#FFFFFF
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#424242
  • statusBar.background#FFFFFF
  • statusBar.debuggingBackground#CC6633
  • statusBar.debuggingBorder#FF000000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#757575
  • statusBar.noFolderBackground#FFFFFF
  • statusBarItem.remoteBackground#C2185B
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#B4B4B4
  • tab.activeForeground#212121
  • tab.border#F5F5F5
  • tab.hoverBackground#EEEEEE
  • tab.inactiveBackground#FFFFFF
  • tab.unfocusedHoverBackground#EEEEEE
  • terminal.ansiBlack#3F4451
  • terminal.ansiBlue#0277BD
  • terminal.ansiBrightBlack#4F5666
  • terminal.ansiBrightBlue#0277BD
  • terminal.ansiBrightCyan#94E2D5
  • terminal.ansiBrightGreen#388E3C
  • terminal.ansiBrightMagenta#7B1FA2
  • terminal.ansiBrightRed#D32F2F
  • terminal.ansiBrightWhite#E6E6E6
  • terminal.ansiBrightYellow#F1FA8C
  • terminal.ansiCyan#94E2D5
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#7B1FA2
  • terminal.ansiRed#D32F2F
  • terminal.ansiWhite#424242
  • terminal.ansiYellow#F1FA8C
  • terminal.background#FFFFFF
  • terminal.border#3E4452
  • terminal.foreground#424242
  • terminal.selectionBackground#42424230
  • textBlockQuote.background#F5F5F5
  • textBlockQuote.border#BDBDBD
  • textLink.foreground#0277BD
  • textPreformat.foreground#C2185B
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#757575
  • titleBar.inactiveBackground#FFFFFF
  • titleBar.inactiveForeground#9E9E9E
  • tree.indentGuidesStroke#4242421D
  • walkThrough.embeddedEditorBackground#F5F5F5
  • welcomePage.buttonHoverBackground#E0E0E0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded#424242
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#C2185B
variable.other.generic-type.haskell#7B1FA2
storage.type.haskell#C2185B
support.variable.magic.python#C2185B
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#424242
variable.parameter.function.language.special.self.python#FBC02D
variable.parameter.function.language.special.cls.python#FBC02D
storage.modifier.lifetime.rust#424242
support.function.std.rust#0277BD
entity.name.lifetime.rust#FBC02D
variable.language.rust#C2185B
support.constant.edge#7B1FA2
constant.other.character-class.regexp#C2185B
keyword.operator.word#7B1FA2
keyword.operator.quantifier.regexp#C2185B
variable.parameter.function#424242
comment markup.link#757575italic
markup.changed.diff#FBC02D
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#0277BD
markup.inserted.diff#388E3C
markup.deleted.diff#D32F2F
meta.function.c,meta.function.cpp#C2185B
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#424242
punctuation.separator.key-value#424242
keyword.operator.expression.import#0277BD
support.constant.math#FBC02D
support.constant.property.math#C2185B
variable.other.constant#FBC02D
storage.type.annotation.java, storage.type.object.array.java#FBC02D
source.java#C2185B
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#424242
meta.method.java#0277BD
storage.modifier.import.java,storage.type.java,storage.type.generic.java#FBC02D
keyword.operator.instanceof.java#7B1FA2
meta.definition.variable.name.java#C2185B
keyword.operator.logical#0277BD
keyword.operator.bitwise#0277BD
keyword.operator.channel#0277BD
support.constant.property-value.scss,support.constant.property-value.css#C2185B
keyword.operator.css,keyword.operator.scss,keyword.operator.less#0277BD
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#C2185B
punctuation.separator.list.comma.css#424242
support.constant.color.w3c-standard-color-name.css#C2185B
support.type.vendored.property-name.css#0277BD
support.module.node,support.type.object.module,support.module.node#FBC02D
entity.name.type.module#FBC02D
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#C2185B
support.constant.json#C2185B
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#7B1FA2
support.type.object.console#C2185B
support.variable.property.process#C2185B
entity.name.function,support.function.console#0277BD
keyword.operator.misc.rust#424242
keyword.operator.sigil.rust#7B1FA2
keyword.operator.delete#7B1FA2
support.type.object.dom#0277BD
support.variable.dom,support.variable.property.dom#C2185B
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#0277BD
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#7B1FA2
punctuation.separator.delimiter#424242
punctuation.separator.c,punctuation.separator.cpp#7B1FA2
support.type.posix-reserved.c,support.type.posix-reserved.cpp#0277BD
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#7B1FA2
variable.parameter.function.language.python#C2185B
support.type.python#0277BD
keyword.operator.logical.python#7B1FA2
variable.parameter.function.python#C2185B
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#424242
meta.function-call.generic.python#0277BD
constant.character.format.placeholder.other.python#C2185B
keyword.operator#424242
keyword.operator.assignment.compound#7B1FA2
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#0277BD
keyword#7B1FA2
entity.name.namespace#FBC02D
variable#C2185B
variable.c#424242
variable.language#FBC02D
token.variable.parameter.java#424242
import.storage.java#FBC02D
token.package.keyword#7B1FA2
token.package#424242
entity.name.function, meta.require, support.function.any-method, variable.function#0277BD
entity.name.type.namespace#FBC02D
support.class, entity.name.type.class#FBC02D
entity.name.class.identifier.namespace.type#FBC02D
entity.name.class, variable.other.class.js, variable.other.class.ts#FBC02D
variable.other.class.php#C2185B
entity.name.type#FBC02D
keyword.control#7B1FA2
control.elements, keyword.operator.less#C2185B
keyword.other.special-method#0277BD
storage#7B1FA2
token.storage#7B1FA2
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#7B1FA2
token.storage.type.java#FBC02D
support.function#0277BD
support.type.property-name#424242
support.type.property-name.toml, support.type.property-name.table.toml, support.type.property-name.array.toml#C2185B
support.constant.property-value#424242
support.constant.font-name#C2185B
meta.tag#424242
string#388E3C
constant.other.symbol#0277BD
constant.numeric#C2185B
constant#C2185B
punctuation.definition.constant#C2185B
entity.name.tag#C2185B
entity.other.attribute-name#C2185B
entity.other.attribute-name.id#0277BD
entity.other.attribute-name.class.css#C2185B
meta.selector#7B1FA2
markup.heading#C2185B
markup.heading punctuation.definition.heading, entity.name.section#0277BD
keyword.other.unit#C2185B
markup.bold,todo.bold#C2185B
punctuation.definition.bold#FBC02D
markup.italic, punctuation.definition.italic,todo.emphasis#7B1FA2italic
emphasis md#7B1FA2
entity.name.section.markdown#C2185B
punctuation.definition.heading.markdown#C2185B
punctuation.definition.list.begin.markdown#FBC02D
markup.heading.setext#424242
punctuation.definition.bold.markdown#C2185B
markup.inline.raw.markdown#388E3C
markup.inline.raw.string.markdown#388E3C
punctuation.definition.raw.markdown#FBC02D
punctuation.definition.list.markdown#FBC02D
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#C2185B
beginning.punctuation.definition.list.markdown#C2185B
punctuation.definition.metadata.markdown#C2185B
markup.underline.link.markdown,markup.underline.link.image.markdown#7B1FA2
string.other.link.title.markdown,string.other.link.description.markdown#0277BD
markup.raw.monospace.asciidoc#388E3C
punctuation.definition.asciidoc#FBC02D
markup.list.asciidoc#FBC02D
markup.link.asciidoc,markup.other.url.asciidoc#7B1FA2
string.unquoted.asciidoc,markup.other.url.asciidoc#0277BD
string.regexp#0277BD
punctuation.section.embedded, variable.interpolation#C2185B
punctuation.section.embedded.begin,punctuation.section.embedded.end#7B1FA2
invalid.illegal#FFFFFF
invalid.illegal.bad-ampersand.html#424242
invalid.illegal.unrecognized-tag.html#C2185B
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.deprecated.entity.other.attribute-name.html#C2185B
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#C2185B
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#C2185B
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#388E3C
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#0277BD
support.type.property-name.json#C2185B
support.type.property-name.json punctuation#C2185B
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#7B1FA2
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#7B1FA2
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#FBC02D
keyword.operator.error-control.php#7B1FA2
keyword.operator.type.php#7B1FA2
punctuation.section.array.begin.php#424242
punctuation.section.array.end.php#424242
invalid.illegal.non-null-typehinted.php#D32F2F
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#FBC02D
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#0277BD
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#424242
support.constant.core.rust#C2185B
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#C2185B
entity.name.goto-label.php,support.other.php#0277BD
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#C2185B
keyword.operator.regexp.php#7B1FA2
keyword.operator.comparison.php#0277BD
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#7B1FA2
meta.function.decorator.python#0277BD
support.token.decorator.python,meta.function.decorator.identifier.python#0277BD
function.parameter#424242
function.brace#424242
function.parameter.ruby, function.parameter.cs#424242
constant.language.symbol.ruby#0277BD
constant.language.symbol.hashkey.ruby#0277BD
rgb-value#0277BD
inline-color-decoration rgb-value#C2185B
less rgb-value#C2185B
selector.sass#C2185B
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#F1FA8C
block.scope.end,block.scope.begin#424242
storage.type.cs#F1FA8C
entity.name.variable.local.cs#C2185B
token.info-token#0277BD
token.warn-token#C2185B
token.error-token#D32F2F
token.debug-token#7B1FA2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#7B1FA2
meta.template.expression#424242
keyword.operator.module#7B1FA2
support.type.type.flowtype#0277BD
support.type.primitive#F1FA8C
meta.property.object#C2185B
variable.parameter.function.js#C2185B
keyword.other.template.begin#388E3C
keyword.other.template.end#388E3C
keyword.other.substitution.begin#388E3C
keyword.other.substitution.end#388E3C
keyword.operator.assignment#0277BD
keyword.operator.assignment.go#F1FA8C
keyword.operator.arithmetic.go, keyword.operator.address.go#7B1FA2
keyword.operator.arithmetic.c, keyword.operator.arithmetic.cpp#7B1FA2
entity.name.package.go#F1FA8C
support.type.prelude.elm#0277BD
support.constant.elm#C2185B
punctuation.quasi.element#7B1FA2
constant.character.entity#C2185B
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#0277BD
entity.global.clojure#FBC02D
meta.symbol.clojure#C2185B
constant.keyword.clojure#0277BD
meta.arguments.coffee, variable.parameter.function.coffee#C2185B
source.ini#388E3C
meta.scope.prerequisites.makefile#C2185B
source.makefile#F1FA8C
storage.modifier.import.groovy#F1FA8C
meta.method.groovy#0277BD
meta.definition.variable.name.groovy#C2185B
meta.definition.class.inherited.classes.groovy#388E3C
support.variable.semantic.hlsl#FBC02D
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#7B1FA2
text.variable, text.bracketed#C2185B
support.type.swift, support.type.vb.asp#F1FA8C
entity.name.function.xi#F1FA8C
entity.name.class.xi#0277BD
constant.character.character-class.regexp.xi#C2185B
constant.regexp.xi#7B1FA2
keyword.control.xi#0277BD
invalid.xi#424242
beginning.punctuation.definition.quote.markdown.xi#388E3C
beginning.punctuation.definition.list.markdown.xi#757575italic
constant.character.xi#0277BD
accent.xi#0277BD
wikiword.xi#C2185B
constant.other.color.rgb-value.xi#424242
punctuation.definition.tag.xi#757575
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#F1FA8C
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#C2185B
meta.brace.square#424242
comment, punctuation.definition.comment#757575italic
markup.quote.markdown#757575
punctuation.definition.block.sequence.item.yaml#424242
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#0277BD
entity.name.variable.parameter.cs#F1FA8C
entity.name.variable.field.cs#C2185B
markup.deleted#C2185B
markup.inserted#388E3C
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D32F2F
support.other.namespace.php#424242
variable.parameter.function.latex#C2185B
variable.other.object#F1FA8C
variable.other.constant.property#C2185B
entity.other.inherited-class#F1FA8C
variable.other.readwrite.c#C2185B
entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php#424242
constant.numeric.decimal.asm.x86_64#7B1FA2
support.other.parenthesis.regexp#C2185B
constant.character.escape#0277BD
string.regexp#C2185B
log.info#388E3C
log.warning#F1FA8C
log.error#C2185B
keyword.operator.expression.is#7B1FA2
entity.name.label#C2185B
support.class.math.block.environment.latex, constant.other.general.math.tex#0277BD
constant.character.math.tex#388E3C
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super#C2185Bitalic
comment.line.double-slash,comment.block.documentation#757575italic
markup.italic.markdown#7B1FA2italic