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.foreground#D7DAE0
  • activityBarBadge.background#528BFF
  • activityBarBadge.foreground#D7DAE0
  • badge.background#528BFF
  • badge.foreground#D7DAE0
  • button.background#4D78CC
  • button.foreground#FFFFFF
  • button.hoverBackground#6087CF
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#353b45
  • dropdown.border#181A1F
  • editor.background#282C34
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#ABB2BF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.background#21252B
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#ABB2BF26
  • editorInlayHint.background#2C313A
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#ABB2BF26
  • editorWidget.background#21252B
  • editorWidget.border#3A3F4B
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#1B1D23
  • input.border#181A1F
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A66
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • notebook.cellEditorBackground#2C313A
  • notification.background#21252B
  • peekView.border#528BFF
  • peekViewEditor.background#1B1D23
  • peekViewResult.background#21252B
  • peekViewResult.selectionBackground#2C313A
  • peekViewTitle.background#1B1D23
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252B
  • sideBarSectionHeader.background#333842
  • statusBar.background#21252B
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#282C34
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#B2955F
entity.other.inherited-class#B2955F
keyword#9D6452
keyword.control#9D6452
keyword.operator#9D6452
keyword.other.special-method#61AFEF
keyword.other.unit#BC8B5F
storage#9D6452
storage.type.annotation, storage.type.primitive#9D6452
storage.modifier.package, storage.modifier.import#ABB2BF
constant#BC8B5F
constant.variable#BC8B5F
constant.character.escape#56B6C2
constant.numeric#BC8B5F
constant.other.color#56B6C2
constant.other.symbol#56B6C2
variable#5688AF
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#398664
string > source, string embedded#ABB2BF
string.regexp#56B6C2
string.regexp source.ruby.embedded#B2955F
string.other.link#5688AF
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#61AFEF
punctuation.definition.bold#B2955Fbold
punctuation.definition.italic#9D6452italic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#B2955F
support.type#56B6C2
support.function#56B6C2
support.function.any-method#61AFEF
entity.name.function#61AFEF
entity.name.class, entity.name.type.class#B2955F
entity.name.section#61AFEF
entity.name.tag#6C8958
entity.other.attribute-name#BC8B5F
entity.other.attribute-name.id#61AFEF
meta.class#B2955F
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#5688AF
meta.link#BC8B5F
meta.require#61AFEF
meta.selector#9D6452
meta.separator#ABB2BF
meta.tag#ABB2BF
underline
none#ABB2BF
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#BC8B5Fbold
markup.changed#9D6452
markup.deleted#5688AF
markup.italic#9D6452italic
markup.heading#5688AF
markup.heading punctuation.definition.heading#61AFEF
markup.link#56B6C2
markup.inserted#398664
markup.quote#BC8B5F
markup.raw#398664
source.c keyword.operator#9D6452
source.cpp keyword.operator#9D6452
source.cs keyword.operator#9D6452
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#61AFEF
source.elixir variable.definition, source.elixir variable.anonymous#9D6452
source.elixir parameter.variable.function#BC8B5Fitalic
source.elixir quoted#398664
source.elixir keyword.special-method, source.elixir embedded.section, source.elixir embedded.source.empty#5688AF
source.elixir readwrite.module punctuation#5688AF
source.elixir regexp.section, source.elixir regexp.string#BE5046
source.elixir separator, source.elixir keyword.operator#BC8B5F
source.elixir variable.constant#B2955F
source.elixir array, source.elixir scope, source.elixir section#828997
source.gfm markup
source.gfm link entity#61AFEF
source.go storage.type.string#9D6452
source.ini keyword.other.definition.ini#5688AF
source.java storage.modifier.import#B2955F
source.java storage.type#B2955F
source.java keyword.operator.instanceof#9D6452
source.java-properties meta.key-pair#5688AF
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#9D6452
source.ts keyword.operator#56B6C2
source.flow keyword.operator#56B6C2
source.json meta.structure.dictionary.json > string.quoted.json#5688AF
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#5688AF
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#398664
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#56B6C2
ng.interpolation#5688AF
ng.interpolation.begin, ng.interpolation.end#61AFEF
ng.interpolation function#5688AF
ng.interpolation function.begin, ng.interpolation function.end#61AFEF
ng.interpolation bool#BC8B5F
ng.interpolation bracket#ABB2BF
ng.pipe, ng.operator#ABB2BF
ng.tag#56B6C2
ng.attribute-with-value attribute-name#B2955F
ng.attribute-with-value string#9D6452
ng.attribute-with-value string.begin, ng.attribute-with-value string.end#ABB2BF
source.ruby constant.other.symbol > punctuationinherit
source.php class.bracket#ABB2BF
source.python keyword.operator.logical.python#9D6452
source.python variable.parameter#BC8B5F
customrule#ABB2BF
support.type.property-name#ABB2BF
string.quoted.double punctuation#398664
support.constant#BC8B5F
support.type.property-name.json#5688AF
support.type.property-name.json punctuation#5688AF
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#5688AF
support.variable.property.dom.js, support.variable.property.dom.ts#5688AF
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#5688AF
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#5688AF
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#9D6452
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#9D6452
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#BC8B5F
source.js support.variable, source.ts support.variable, source.tsx support.variable#5688AF
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#BC8B5F
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#9D6452
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#5688AF
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#5688AF
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#BC8B5F
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#5688AF
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#398664
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#398664
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#B2955F
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#5688AF
constant.language.json#56B6C2
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#BC8B5F
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#398664
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#398664
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#9D6452
variable.other.object.js, variable.other.object.ts#ABB2BF
meta.object-literal.key.js, meta.object-literal.key.ts#5688AF
source.python constant.other#ABB2BF
source.python constant#BC8B5F
constant.character.format.placeholder.other.python storage#BC8B5F
support.variable.magic.python#5688AF
meta.function.parameters.python#BC8B5F
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#5688AF
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#61AFEF
storage.type.cs#B2955F
keyword.other.unsafe.rust#9D6452
entity.name.type.rust#56B6C2
storage.modifier.lifetime.rust#ABB2BF
entity.name.lifetime.rust#BC8B5F
storage.type.core.rust#56B6C2
meta.attribute.rust#BC8B5F
storage.class.std.rust#56B6C2
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#5688AF
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#BC8B5F
punctuation.separator.key-value.scss#5688AF
punctuation.definition.constant.scss#BC8B5F
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#B2955F
entity.name.section.markdown#5688AF
punctuation.definition.heading.markdown#5688AF
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#BC8B5F
markup.inline.raw.markdown#398664
beginning.punctuation.definition.list.markdown#5688AF
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#9D6452
markup.underline.link.markdown, markup.underline.link.image.markdown#9D6452
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF
punctuation.separator.variable.ruby#5688AF
variable.other.constant.ruby#BC8B5F
keyword.operator.other.ruby#398664
punctuation.definition.variable.php#5688AF
meta.class.php#ABB2BF