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.background#1F232A
  • activityBar.dropBackground#3B3D5280
  • activityBar.foreground#E1E1E1B3
  • activityBarBadge.background#F33B61
  • activityBarBadge.foreground#E1E1E1B3
  • badge.background#1D212A
  • badge.foreground#E1E1E1
  • breadcrumbPicker.background#191b21
  • button.background#1D212A
  • debugToolBar.background#1F232A
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#191b21
  • dropdown.listBackground#1D212A
  • editor.background#1F232A
  • editor.findMatchBackground#3B3D5280
  • editor.findMatchHighlightBackground#3B3D524D
  • editor.findRangeHighlightBackground#3B3D521A
  • editor.hoverHighlightBackground#3B3D524D
  • editor.lineHighlightBackground#1D212A4D
  • editor.rangeHighlightBackground#1D212A80
  • editor.selectionBackground#3B3D52B3
  • editor.selectionHighlightBackground#3B3D52B3
  • editor.wordHighlightBackground#3B3D5280
  • editor.wordHighlightStrongBackground#3B3D5280
  • editorBracketMatch.background#3B3D5280
  • editorBracketMatch.border#3B3D5200
  • editorCodeLens.foreground#3B3D5280
  • editorCursor.background#1F232A
  • editorCursor.foreground#E95678
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#3B3D524D
  • editorGroupHeader.tabsBackground#191b21
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#1D212A
  • editorIndentGuide.background#1D212A80
  • editorLineNumber.activeForeground#E1E1E180
  • editorLineNumber.foreground#E1E1E11A
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#1D212AB3
  • editorOverviewRuler.bracketMatchForeground#E1E1E180
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#3B3D52
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#3B3D524D
  • editorSuggestWidget.highlightForeground#E95678
  • editorWarning.foreground#27D797B3
  • editorWidget.background#191b21
  • editorWidget.border#191b21
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95678
  • extensionButton.prominentHoverBackground#F33B61
  • focusBorder#1A1C23
  • foreground#E1E1E1
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#E1E1E14D
  • gitDecoration.modifiedResourceForeground#FAB38E
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#1D212A
  • inputOption.activeBorder#F33B6180
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#1D212A80
  • list.activeSelectionForeground#E1E1E1
  • list.dropBackground#3B3D5280
  • list.errorForeground#F43E5CE6
  • list.focusBackground#1D212A80
  • list.focusForeground#E1E1E1
  • list.highlightForeground#E95678
  • list.hoverBackground#1D212A80
  • list.hoverForeground#E1E1E1
  • list.inactiveFocusBackground#1D212A80
  • list.inactiveSelectionBackground#1D212A4D
  • list.inactiveSelectionForeground#E1E1E1
  • list.warningForeground#27D797B3
  • panelTitle.activeBorder#E95678
  • peekView.border#1A1C23
  • peekViewEditor.background#191b21
  • peekViewEditor.matchHighlightBackground#3B3D5280
  • peekViewResult.background#191b21
  • peekViewResult.matchHighlightBackground#3B3D5280
  • peekViewResult.selectionBackground#1D212A80
  • peekViewTitle.background#191b21
  • pickerGroup.foreground#E95678E6
  • progressBar.background#E95678
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#3B3D5280
  • scrollbarSlider.background#3B3D5280
  • scrollbarSlider.hoverBackground#3B3D52B3
  • selection.background#3B3D52E6
  • sideBar.background#191b21
  • sideBar.dropBackground#3B3D524D
  • sideBar.foreground#E1E1E1B3
  • sideBarSectionHeader.background#1D212A
  • sideBarSectionHeader.foreground#E1E1E1B3
  • statusBar.background#191b21
  • statusBar.debuggingBackground#3B3D52
  • statusBar.debuggingForeground#E1E1E1
  • statusBar.foreground#E1E1E180
  • statusBar.noFolderBackground#1F232A
  • statusBarItem.hoverBackground#1D212A
  • statusBarItem.prominentBackground#1D212A
  • statusBarItem.prominentHoverBackground#3B3D52
  • statusBarItem.remoteBackground#F33B61
  • statusBarItem.remoteForeground#E1E1E1
  • tab.activeBorder#E95678
  • tab.border#1F232A00
  • tab.inactiveBackground#191b21
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#E1E1E1
  • terminal.selectionBackground#3B3D524D
  • terminalCursor.background#E1E1E1
  • terminalCursor.foreground#3B3D5280
  • textLink.activeForeground#F33B61
  • textLink.foreground#E95678
  • titleBar.activeBackground#1F232A
  • titleBar.inactiveBackground#1F232A
  • walkThrough.embeddedEditorBackground#191b21
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
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#E95678
variable.other.generic-type.haskell#B877DB
storage.type.haskell#F09483
support.variable.magic.python#E95678
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#abb2bf
variable.parameter.function.language.special.self.python#FAC29A
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#61afef
entity.name.lifetime.rust#FAC29A
variable.language.rust#E95678
support.constant.edge#B877DBE6
constant.other.character-class.regexp#E95678
keyword.operator.quantifier.regexp#F09483
punctuation.definition.string.begin,punctuation.definition.string.end#89ca78E6
variable.parameter.function#abb2bf
comment markup.link#5c637080
markup.changed.diff#FAC29A
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61afef
markup.inserted.diff#89ca78E6
markup.deleted.diff#E95678
meta.function.c,meta.function.cpp#E95678
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#abb2bf
punctuation.separator.key-value#abb2bf
keyword.operator.expression.import#61afef
support.constant.math#FAC29A
support.constant.property.math#F09483
variable.other.constant#FAC29A
storage.type.annotation.java, storage.type.object.array.java#FAC29A
source.java#E95678
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#abb2bf
meta.method.java#61afef
storage.modifier.import.java,storage.type.java,storage.type.generic.java#FAC29A
keyword.operator.instanceof.java#B877DB
meta.definition.variable.name.java#E95678
keyword.operator.logical#25B0BC
keyword.operator.bitwise#25B0BC
keyword.operator.channel#25B0BC
support.constant.property-value.scss,support.constant.property-value.css#F09483
keyword.operator.css,keyword.operator.scss,keyword.operator.less#25B0BC
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#F09483
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#F09483
support.type.vendored.property-name.css#25B0BC
support.module.node,support.type.object.module,support.module.node#FAC29A
entity.name.type.module#FAC29A
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#E95678
support.constant.json#F09483
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#B877DBE6
support.type.object.console#E95678
support.variable.property.process#F09483
entity.name.function,support.function.console#61afef
keyword.operator.misc.rust#abb2bf
keyword.operator.sigil.rust#B877DB
keyword.operator.delete#B877DBE6
support.type.object.dom#25B0BC
support.variable.dom,support.variable.property.dom#E95678
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#25B0BC
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#B877DB
punctuation.separator.delimiter#abb2bf
punctuation.separator.c,punctuation.separator.cpp#B877DB
support.type.posix-reserved.c,support.type.posix-reserved.cpp#25B0BC
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#B877DB
variable.parameter.function.language.python#F09483
support.type.python#25B0BC
keyword.operator.logical.python#B877DB
variable.parameter.function.python#F09483
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#abb2bf
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#F09483
keyword.operator#abb2bf
keyword.operator.assignment.compound#B877DB
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#25B0BC
keyword#B877DBE6italic
entity.name.namespace#FAC29A
variable#E95678
variable.c#abb2bf
variable.language#FAC29A
token.variable.parameter.java#abb2bf
import.storage.java#FAC29A
token.package.keyword#B877DB
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#FAC29A
support.class, entity.name.type.class#FAC29A
entity.name.class.identifier.namespace.type#FAC29A
entity.name.class, variable.other.class.js, variable.other.class.ts#FAC29A
variable.other.class.php#E95678
entity.name.type#FAC29A
keyword.control#B877DB
control.elements, keyword.operator.less#F09483
keyword.other.special-method#61afef
storage#B877DB
token.storage#B877DBE6
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#B877DBE6
token.storage.type.java#FAC29A
support.function#25B0BC
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#F09483
meta.tag#abb2bf
string#89ca78E6
constant.other.symbol#25B0BC
constant.numeric#F09483
constant#F09483
punctuation.definition.constant#F09483
entity.name.tag#E95678italic
entity.other.attribute-name#F09483italic
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name.class.css#F09483normal
meta.selector#B877DBE6
markup.heading#E95678
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#E95678
markup.bold,todo.bold#F09483
punctuation.definition.bold#FAC29A
markup.italic, punctuation.definition.italic,todo.emphasis#B877DB
emphasis md#B877DB
entity.name.section.markdown#E95678
punctuation.definition.heading.markdown#E95678
punctuation.definition.list.begin.markdown#E95678
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#F09483
markup.inline.raw.markdown#89ca78E6
markup.inline.raw.string.markdown#89ca78E6
punctuation.definition.list.markdown#E95678
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#E95678
beginning.punctuation.definition.list.markdown#E95678
punctuation.definition.metadata.markdown#E95678
markup.underline.link.markdown,markup.underline.link.image.markdown#B877DB
string.other.link.title.markdown,string.other.link.description.markdown#61afef
string.regexp#25B0BC
constant.character.escape#25B0BC
punctuation.section.embedded, variable.interpolation#E95678
punctuation.section.embedded.begin,punctuation.section.embedded.end#B877DB
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#abb2bf
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#E95678
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E95678
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#89ca78E6
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#25B0BC
support.type.property-name.json#E95678
support.type.property-name.json punctuation#E95678
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#B877DB
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#B877DB
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#FAC29A
keyword.operator.error-control.php#B877DB
keyword.operator.type.php#B877DB
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#FAC29A
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
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#abb2bf
support.constant.core.rust#F09483
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#F09483
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#25B0BC
keyword.operator.regexp.php#B877DB
keyword.operator.comparison.php#25B0BC
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#B877DB
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#25B0BC
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#25B0BC
rgb-value#25B0BC
inline-color-decoration rgb-value#F09483
less rgb-value#F09483
selector.sass#E95678
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#FAC29A
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#FAC29A
entity.name.variable.local.cs#E95678
token.info-token#61afef
token.warn-token#F09483
token.error-token#f44747
token.debug-token#B877DB
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#B877DB
meta.template.expression#abb2bf
keyword.operator.module#B877DB
support.type.type.flowtype#61afef
support.type.primitive#FAC29A
meta.property.object#E95678
variable.parameter.function.js#E95678
keyword.other.template.begin#89ca78E6
keyword.other.template.end#89ca78E6
keyword.other.substitution.begin#89ca78E6
keyword.other.substitution.end#89ca78E6
keyword.operator.assignment#25B0BC
keyword.operator.assignment.go#FAC29A
keyword.operator.arithmetic.go, keyword.operator.address.go#B877DB
entity.name.package.go#FAC29A
support.type.prelude.elm#25B0BC
support.constant.elm#F09483
punctuation.quasi.element#B877DBE6
constant.character.entity#E95678
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#25B0BC
entity.global.clojure#FAC29A
meta.symbol.clojure#E95678
constant.keyword.clojure#25B0BC
meta.arguments.coffee, variable.parameter.function.coffee#E95678
source.ini#89ca78E6
meta.scope.prerequisites.makefile#E95678
source.makefile#FAC29A
storage.modifier.import.groovy#FAC29A
meta.method.groovy#61afef
meta.definition.variable.name.groovy#E95678
meta.definition.class.inherited.classes.groovy#89ca78E6
support.variable.semantic.hlsl#FAC29A
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#B877DBE6
text.variable, text.bracketed#E95678
support.type.swift, support.type.vb.asp#FAC29A
entity.name.function.xi#FAC29A
entity.name.class.xi#25B0BC
constant.character.character-class.regexp.xi#E95678
constant.regexp.xi#B877DB
keyword.control.xi#25B0BC
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#89ca78E6
beginning.punctuation.definition.list.markdown.xi#abb2bfB3
constant.character.xi#61afef
accent.xi#61afef
wikiword.xi#F09483
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#5c6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#FAC29A
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#E95678
meta.brace.square#abb2bf
comment, punctuation.definition.comment#abb2bfB3
markup.quote.markdown#5c6370
punctuation.definition.block.sequence.item.yaml#abb2bf
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#25B0BC
entity.name.variable.parameter.cs#FAC29A
entity.name.variable.field.cs#E95678
markup.deleted#E95678
markup.inserted#89ca78E6
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#abb2bf
variable.other.object#FAC29A
variable.other.constant.property#E95678
entity.other.inherited-class#FAC29A