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#2e3b51
  • 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#2E3B51
  • dropdown.border#1E2B41
  • editor.background#2e3b51
  • editor.findMatchHighlightBackground#528BFF3D
  • editor.foreground#BBC2CF
  • editor.lineHighlightBackground#99BBFF0A
  • editor.selectionBackground#3E4451
  • editorCursor.foreground#528BFF
  • editorGroup.background#2e3b51
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#2e3b51
  • editorHoverWidget.background#2e3b51
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#BBC2CF26
  • editorLineNumber.activeForeground#BBC2CF
  • editorLineNumber.foreground#636D83
  • editorRuler.foreground#BBC2CF26
  • editorSuggestWidget.background#2e3b51
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#4e5b71
  • editorWhitespace.foreground#BBC2CF26
  • editorWidget.background#2e3b51
  • editorWidget.border#3A3F4B
  • extensionButton.prominentBackground#2BA143
  • extensionButton.prominentHoverBackground#37AF4E
  • focusBorder#528BFF
  • input.background#293762
  • input.border#181A1F
  • list.activeSelectionBackground#4e5b71
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#4e5b71
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#4e5b7166
  • list.inactiveSelectionBackground#2e3b51
  • list.inactiveSelectionForeground#D7DAE0
  • notification.background#2e3b51
  • peekView.border#528BFF
  • peekViewEditor.background#293762
  • peekViewResult.background#2e3b51
  • peekViewResult.selectionBackground#1e2b41
  • peekViewTitle.background#293762
  • pickerGroup.border#528BFF
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#2e3b51
  • sideBarSectionHeader.background#2e3b51
  • statusBar.background#2e3b51
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#9DA5B4
  • statusBar.noFolderBackground#2e3b51
  • statusBarItem.hoverBackground#1e2b41
  • tab.activeBackground#3e4b61
  • tab.activeForeground#e7e7e7
  • tab.border#2e3b51
  • tab.inactiveBackground#2e3b51
  • titleBar.activeBackground#2e3b51
  • titleBar.activeForeground#9DA5B4
  • titleBar.inactiveBackground#2e3b51
  • titleBar.inactiveForeground#9DA5B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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