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#272a30
  • activityBar.foreground#bdc7db
  • activityBarBadge.background#9980e5
  • activityBarBadge.foreground#bdc7db
  • badge.background#9980e5
  • badge.foreground#bdc7db
  • button.background#9980e5
  • button.foreground#fafafa
  • button.hoverBackground#22252a
  • diffEditor.insertedTextBackground#9980e533
  • dropdown.background#272a30
  • dropdown.border#22252a
  • editor.background#272a30
  • editor.findMatchHighlightBackground#22252a60
  • editor.foreground#bdc7db
  • editor.lineHighlightBackground#9980e522
  • editor.selectionBackground#9980e522
  • editorCursor.foreground#9980e5
  • editorGroup.background#272a30
  • editorGroup.border#22252a
  • editorGroupHeader.tabsBackground#272a30
  • editorHoverWidget.background#272a30
  • editorHoverWidget.border#22252a
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#bdc7db26
  • editorLineNumber.activeForeground#bdc7db
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#bdc7db26
  • editorSuggestWidget.background#272a30
  • editorSuggestWidget.border#22252a
  • editorSuggestWidget.selectedBackground#22252a
  • editorWhitespace.foreground#bdc7db26
  • editorWidget.background#272a30
  • editorWidget.border#22252a
  • extensionButton.prominentBackground#9980e5
  • extensionButton.prominentHoverBackground#9980e5
  • focusBorder#9980e5
  • input.background#272a30
  • input.border#22252a
  • list.activeSelectionBackground#22252a
  • list.activeSelectionForeground#bdc7db
  • list.focusBackground#272a30
  • list.highlightForeground#bdc7db
  • list.hoverBackground#22252a
  • list.inactiveSelectionBackground#272a30
  • list.inactiveSelectionForeground#bdc7db
  • notification.background#272a30
  • peekView.border#22252a
  • peekViewEditor.background#272a30
  • peekViewResult.background#272a30
  • peekViewResult.selectionBackground#272a30
  • peekViewTitle.background#272a30
  • pickerGroup.border#9980e5
  • scrollbarSlider.activeBackground#bdc7db44
  • scrollbarSlider.background#bdc7db22
  • scrollbarSlider.hoverBackground#bdc7db33
  • sideBar.background#272a30
  • sideBarSectionHeader.background#272a30
  • statusBar.background#272a30
  • statusBar.debuggingForeground#bdc7db
  • statusBar.foreground#bdc7db
  • statusBar.noFolderBackground#272a30
  • statusBarItem.hoverBackground#22252a
  • tab.activeBackground#22252a
  • tab.activeForeground#bdc7db
  • tab.border#272a30
  • tab.inactiveBackground#272a30
  • titleBar.activeBackground#272a30
  • titleBar.activeForeground#bdc7db
  • titleBar.inactiveBackground#272a30
  • titleBar.inactiveForeground#bdc7db

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#ecc983
entity.other.inherited-class#ecc983italic
keyword#9980e5
keyword.control#9980e5
keyword.operator#9980e5
keyword.other.special-method#6fadeb
keyword.other.unit#ecaf83
storage#6fadebbold
storage.type.annotation, storage.type.primitive#9980e5italic
storage.modifier.package, storage.modifier.import#bdc7db
constant#9980e5
constant.variable#ecaf83
constant.character.escape#85e0e0
constant.numeric#ecaf83
constant.other.color#85e0e0
constant.other.symbol#85e0e0
variable#e46772
variable.interpolation#df5d5d
variable.parameter#bdc7db
string#97ce97
string > source, string embedded#bdc7db
string.regexp#85e0e0
string.regexp source.ruby.embedded#ecc983
string.other.link#e46772
punctuation.definition.comment#5C6370
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#bdc7db
punctuation.definition.heading, punctuation.definition.identity#6fadeb
punctuation.definition.bold#ecc983bold
punctuation.definition.italic#9980e5italic
punctuation.section.embedded#df5d5d
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#bdc7db
support.class#ecc983
support.type#85e0e0
support.function#85e0e0
support.function.any-method#6fadeb
entity.name.function#9980e5
entity.name.class, entity.name.type.class#ecc983
entity.name.section#6fadeb
entity.name.tag#e46772
entity.other.attribute-name#ecaf83
entity.other.attribute-name.id#6fadeb
meta.class#ecc983
meta.class.body#bdc7db
meta.method-call, meta.method#bdc7db
meta.definition.variable#e46772
meta.link#ecaf83
meta.require#6fadeb
meta.selector#9980e5
meta.separator#bdc7db
meta.tag#bdc7db
underline
none#bdc7db
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#ecaf83bold
markup.changed#9980e5
markup.deleted#e46772
markup.italic#9980e5italic
markup.heading#e46772
markup.heading punctuation.definition.heading#6fadeb
markup.link#85e0e0
markup.inserted#97ce97
markup.quote#ecaf83
markup.raw#97ce97
source.c keyword.operator#9980e5
source.cpp keyword.operator#9980e5
source.cs keyword.operator#9980e5
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#bdc7db
source.elixir source.embedded.source#bdc7db
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#6fadeb
source.elixir variable.definition, source.elixir variable.anonymous#9980e5
source.elixir parameter.variable.function#ecaf83italic
source.elixir quoted#97ce97
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#e46772
source.elixir readwrite.module punctuation#e46772
source.elixir regexp.section, source.elixir regexp.string#df5d5d
source.elixir separator, source.elixir keyword.operator#ecaf83
source.elixir variable.constant#ecc983
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm markup
source.gfm link entity#6fadeb
source.go storage.type.string#9980e5
source.ini keyword.other.definition.ini#e46772
source.java storage.modifier.import#ecc983
source.java storage.type#ecc983
source.java keyword.operator.instanceof#9980e5
source.java-properties meta.key-pair#e46772
source.java-properties meta.key-pair > punctuation#bdc7db
source.js keyword.operator#85e0e0
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#9980e5
source.ts keyword.operator#85e0e0
source.flow keyword.operator#85e0e0
source.json meta.structure.dictionary.json > string.quoted.json#e46772
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e46772
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#97ce97
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#85e0e0
ng.interpolation#e46772
ng.interpolation.begin, ng.interpolation.end#6fadeb
ng.interpolation function#e46772
ng.interpolation function.begin, ng.interpolation function.end#6fadeb
ng.interpolation bool#ecaf83
ng.interpolation bracket#bdc7db
ng.pipe, ng.operator#bdc7db
ng.tag#85e0e0
ng.attribute-with-value attribute-name#ecc983
ng.attribute-with-value string#9980e5
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#bdc7db
source.ruby constant.other.symbol > punctuationinherit
source.php class.bracket#bdc7db
source.python keyword.operator.logical.python#9980e5
source.python variable.parameter#ecaf83
customrule#bdc7db
support.type.property-name#bdc7db
string.quoted.double punctuation#97ce97
support.constant#ecaf83
support.type.property-name.json#e46772
support.type.property-name.json punctuation#e46772
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#85e0e0
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#85e0e0
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#bdc7db
support.variable.dom.js, support.variable.dom.ts#e46772
support.variable.property.dom.js, support.variable.property.dom.ts#e46772
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#df5d5d
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#bdc7db
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#bdc7db
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#bdc7db
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#e46772
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#e46772
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#9980e5
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#9980e5
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#bdc7db
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#bdc7db
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#bdc7db
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#ecaf83
source.js support.variable, source.ts support.variable, source.tsx support.variable#e46772
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#ecaf83
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#9980e5
source.ts keyword.operator, source.tsx keyword.operator#85e0e0
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #bdc7db
constant.language.import-export-all.js, constant.language.import-export-all.ts#e46772
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#85e0e0
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#bdc7db
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#e46772
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#ecaf83
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#e46772
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#97ce97
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#bdc7db
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#97ce97
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#bdc7db
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#bdc7db
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#bdc7db
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#bdc7db
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#bdc7db
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#ecc983
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#e46772
constant.language.json#85e0e0
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#ecaf83
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#85e0e0
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#97ce97
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#97ce97
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#9980e5
variable.other.object.js, variable.other.object.ts#bdc7db
meta.object-literal.key.js, meta.object-literal.key.ts#e46772
source.python constant.other#bdc7db
source.python constant#ecaf83
constant.character.format.placeholder.other.python storage#ecaf83
support.variable.magic.python#e46772
meta.function.parameters.python#ecaf83
punctuation.separator.annotation.python#bdc7db
punctuation.separator.parameters.python#bdc7db
entity.name.variable.field.cs#e46772
source.cs keyword.operator#bdc7db
variable.other.readwrite.cs#bdc7db
variable.other.object.cs#bdc7db
variable.other.object.property.cs#bdc7db
entity.name.variable.property.cs#6fadeb
storage.type.cs#ecc983
keyword.other.unsafe.rust#9980e5
entity.name.type.rust#85e0e0
storage.modifier.lifetime.rust#bdc7db
entity.name.lifetime.rust#ecaf83
storage.type.core.rust#85e0e0
meta.attribute.rust#ecaf83
storage.class.std.rust#85e0e0
markup.raw.block.markdown#bdc7db
punctuation.definition.variable.shell#e46772
support.constant.property-value.css#bdc7db
punctuation.definition.constant.css#ecaf83
punctuation.separator.key-value.scss#e46772
punctuation.definition.constant.scss#ecaf83
meta.property-list.scss punctuation.separator.key-value.scss#bdc7db
storage.type.primitive.array.java#ecc983
entity.name.section.markdown#e46772
punctuation.definition.heading.markdown#e46772
markup.heading.setext#bdc7db
punctuation.definition.bold.markdown#ecaf83
markup.inline.raw.markdown#97ce97
beginning.punctuation.definition.list.markdown#e46772
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#bdc7db
punctuation.definition.metadata.markdown#9980e5
markup.underline.link.markdown, markup.underline.link.image.markdown#9980e5
string.other.link.title.markdown, string.other.link.description.markdown#6fadeb
punctuation.separator.variable.ruby#e46772
variable.other.constant.ruby#ecaf83
keyword.operator.other.ruby#97ce97
punctuation.definition.variable.php#e46772
meta.class.php#bdc7db