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#333842
  • activityBar.border#434a57
  • activityBar.foreground#D7DAE0
  • activityBar.inactiveForeground#636e83
  • activityBarBadge.background#022EC7
  • activityBarBadge.foreground#fff
  • badge.background#022dc7
  • badge.foreground#ffffff
  • button.background#022EC7
  • button.border#022EC7
  • button.foreground#FFFFFF
  • button.hoverBackground#022dc79f
  • contrastBorder#333842
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#333842
  • dropdown.border#333842
  • editor.background#333842
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#022dc76d
  • editorCursor.foreground#3958c9
  • editorGroup.border#434a57
  • editorGroupHeader.tabsBackground#333842
  • editorHoverWidget.background#333842
  • editorHoverWidget.border#333842
  • editorIndentGuide.activeBackground#636e83
  • editorIndentGuide.background#ABB2BF26
  • editorInlayHint.background#333842
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#333842
  • editorSuggestWidget.border#636e83
  • editorSuggestWidget.selectedBackground#333842
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#333842
  • editorWidget.border#333842
  • extensionBadge.remoteBackground#022dc7
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#434a57
  • icon.foreground#9DA5B4
  • input.background#333842
  • input.border#333842
  • list.activeSelectionBackground#2a3446
  • list.activeSelectionForeground#D7DAE0
  • list.filterMatchBorder#528BFF3D
  • list.focusBackground#333842
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#333842
  • list.inactiveSelectionForeground#D7DAE0
  • menu.border#434a57
  • merge.border#434a57
  • notebook.cellEditorBackground#2C313A
  • notebookScrollbarSlider.background#333842
  • panel.border#434a57
  • peekView.border#022dc7
  • peekViewEditor.background#636e83
  • peekViewResult.background#333842
  • peekViewResult.selectionBackground#2C313A
  • peekViewTitle.background#636e83
  • pickerGroup.border#434a57
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • searchEditor.findMatchBorder#9DA5B4
  • sideBar.background#333842
  • sideBar.border#434a57
  • sideBarSectionHeader.background#333842
  • statusBar.background#333842
  • statusBar.debuggingBackground#8F00FF
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#333842
  • statusBarItem.remoteBackground#022EC7
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#333842
  • tab.activeBorderTop#022EC7
  • tab.activeForeground#9DA5B4
  • tab.border#434a57
  • tab.inactiveBackground#333842
  • titleBar.activeBackground#333842
  • titleBar.activeForeground#9DA5B4
  • titleBar.border#434a57
  • titleBar.inactiveBackground#333842
  • titleBar.inactiveForeground#9DA5B4
  • walkThrough.embeddedEditorBackground#333842
  • welcomePage.progress.background#333842
  • welcomePage.tileBackground#333842
  • widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#787e93italic
comment markup.link#787e93
entity.name.type#f5a81b
entity.other.inherited-class#f5a81b
keyword#A482A1
keyword.control#A482A1
keyword.operator#A482A1
keyword.other.special-method#5e7eef
keyword.other.unit#549acc
storage#A482A1
storage.type.annotation, storage.type.primitive#A482A1
storage.modifier.package, storage.modifier.import#ABB2BF
constant#549acc
constant.variable#549acc
constant.character.escape#56B6C2
constant.numeric#549acc
constant.other.color#56B6C2
constant.other.symbol#56B6C2
variable#a258b8
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#98C379
string > source, string embedded#ABB2BF
string.regexp#56B6C2
string.regexp source.ruby.embedded#E5C07B
string.other.link#a258b8
punctuation.definition.comment#5C6370
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#ABB2BF
punctuation.definition.heading, punctuation.definition.identity#5e7eef
punctuation.definition.bold#E5C07Bbold
punctuation.definition.italic#A482A1italic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#E5C07B
support.type#56B6C2
support.function#56B6C2
support.function.any-method#5e7eef
entity.name.function#5e7eef
entity.name.class, entity.name.type.class#E5C07B
entity.name.section#5e7eef
entity.name.tag#a258b8
entity.other.attribute-name#549acc
entity.other.attribute-name.id#5e7eef
meta.class#E5C07B
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#a258b8
meta.link#549acc
meta.require#5e7ce8
meta.selector#A482A1
meta.separator#ABB2BF
meta.tag#ABB2BF
none#ABB2BF
markup.bold#549accbold
markup.changed#A482A1
markup.deleted#a258b8
markup.italic#A482A1italic
markup.heading#a258b8
markup.heading punctuation.definition.heading#61AFEF
markup.link#56B6C2
markup.inserted#98C379
markup.quote#549acc
markup.raw#98C379
source.c keyword.operator#A482A1
source.cpp keyword.operator#A482A1
source.cs keyword.operator#A482A1
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.elixir source.embedded.source#ABB2BF
source.elixir constant.language, source.elixir constant.numeric, source.elixir constant.definition#6180ed
source.elixir variable.definition, source.elixir variable.anonymous#A482A1
source.elixir parameter.variable.function#549accitalic
source.elixir quoted#98C379
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#a258b8
source.elixir readwrite.module punctuation#a258b8
source.elixir regexp.section, source.elixir regexp.string#BE5046
source.elixir separator, source.elixir keyword.operator#549acc
source.elixir variable.constant#E5C07B
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm link entity#6683ed
source.go storage.type.string#A482A1
source.ini keyword.other.definition.ini#a258b8
source.java storage.modifier.import#E5C07B
source.java storage.type#E5C07B
source.java keyword.operator.instanceof#A482A1
source.java-properties meta.key-pair#a258b8
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#56B6C2
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#A482A1
source.ts keyword.operator#56B6C2
source.flow keyword.operator#56B6C2
source.json meta.structure.dictionary.json > string.quoted.json#9d33bd
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#9d33bd
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#98C379
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
ng.interpolation#9d33bd
ng.interpolation.begin, ng.interpolation.end#617fe9
ng.interpolation function#9d33bd
ng.interpolation function.begin, ng.interpolation function.end#5e7dec
ng.interpolation bool#549acc
ng.interpolation bracket#ABB2BF
ng.pipe, ng.operator#ABB2BF
ng.tag#56B6C2
ng.attribute-with-value attribute-name#E5C07B
ng.attribute-with-value string#A482A1
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#989fb6
source.php class.bracket#989fb6
source.python keyword.operator.logical.python#A482A1
source.python variable.parameter#549acc
customrule#ABB2BF
support.type.property-name#ABB2BF
string.quoted.double punctuation#98C379
support.constant#549acc
support.type.property-name.json#a258b8
support.type.property-name.json punctuation#a258b8
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#56B6C2
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#56B6C2
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF
support.variable.dom.js, support.variable.dom.ts#a258b8
support.variable.property.dom.js, support.variable.property.dom.ts#a258b8
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#a258b8
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#a258b8
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#A482A1
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#A482A1
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#ABB2BF
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF
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#549acc
source.js support.variable, source.ts support.variable, source.tsx support.variable#a258b8
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#549acc
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#A482A1
source.ts keyword.operator, source.tsx keyword.operator#56B6C2
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF
constant.language.import-export-all.js, constant.language.import-export-all.ts#a258b8
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#56B6C2
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#ABB2BF
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#a258b8
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#549acc
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#a258b8
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#98C379
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#ABB2BF
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#98C379
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF
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#ABB2BF
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#ABB2BF
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#E5C07B
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#a258b8
constant.language.json#56B6C2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#549acc
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#56B6C2
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#98C379
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#98C379
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#A482A1
variable.other.object.js, variable.other.object.ts#ABB2BF
meta.object-literal.key.js, meta.object-literal.key.ts#a258b8
source.python constant.other#ABB2BF
source.python constant#549acc
constant.character.format.placeholder.other.python storage#549acc
support.variable.magic.python#a258b8
meta.function.parameters.python#549acc
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#a258b8
source.cs keyword.operator#ABB2BF
variable.other.readwrite.cs#ABB2BF
variable.other.object.cs#ABB2BF
variable.other.object.property.cs#ABB2BF
entity.name.variable.property.cs#4e6acc
storage.type.cs#E5C07B
keyword.other.unsafe.rust#A482A1
entity.name.type.rust#56B6C2
storage.modifier.lifetime.rust#ABB2BF
entity.name.lifetime.rust#549acc
storage.type.core.rust#56B6C2
meta.attribute.rust#0b86df
storage.class.std.rust#56B6C2
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#a258b8
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#549acc
punctuation.separator.key-value.scss#a258b8
punctuation.definition.constant.scss#549acc
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#E5C07B
entity.name.section.markdown#a258b8
punctuation.definition.heading.markdown#a258b8
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#549acc
markup.inline.raw.markdown#98C379
beginning.punctuation.definition.list.markdown#a258b8
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#A482A1
markup.underline.link.markdown, markup.underline.link.image.markdown#A482A1
string.other.link.title.markdown, string.other.link.description.markdown#5975db
punctuation.separator.variable.ruby#a258b8
variable.other.constant.ruby#549acc
keyword.operator.other.ruby#98C379
punctuation.definition.variable.php#a258b8
meta.class.php#ABB2BF