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#2b303b
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#99AAB5
  • activityBarBadge.background#FFFFFF
  • activityBarBadge.foreground#2b303b
  • background#FFFFFF
  • badge.background#FFFFFF
  • badge.foreground#2b303b
  • button.background#2b303b
  • button.foreground#FFFFFF
  • button.hoverBackground#99AAB5
  • descriptionForeground#FFFFFF
  • editor.background#2b303b
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#3F4347
  • editor.lineHighlightBackground#23272A
  • editor.lineHighlightBorder#23272A
  • editor.selectionBackground#3F4347
  • editor.selectionForeground#99AAB5
  • editor.selectionHighlightBackground#99AAB5
  • editor.wordHighlightBackground#3F4347
  • editor.wordHighlightStrongBackground#99AAB5
  • editorBracketMatch.background#23272A
  • editorBracketMatch.border#FFFFFF
  • editorCursor.background#99AAB5
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#2b303b
  • editorHoverWidget.background#2b303b
  • editorHoverWidget.border#2b303b00
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#99AAB5
  • editorSuggestWidget.background#424d66
  • editorSuggestWidget.highlightForeground#ff6a00
  • editorSuggestWidget.selectedBackground#29b6f6
  • editorWidget.background#2b303b
  • focusBorder#23272A
  • foreground#FFFFFF
  • hoverBackground#3F4347
  • hoverForeground#3F4347
  • input.background#3F4347
  • input.border#3F434700
  • input.foreground#FFFFFF
  • input.inputValidation#FF6666
  • input.placeholderForeground#99AAB5
  • list.activeSelectionBackground#23272A
  • list.dropBackground#3F4347
  • list.hoverBackground#3F4347
  • list.hoverForeground#FFFFFF
  • menu.background#2b303b
  • notificationCenterHeader.background#3F4347
  • notificationCenterHeader.foreground#FFFFFF
  • notificationLink.foreground#99AAB5
  • notifications.background#3F4347
  • notifications.foreground#FFFFFF
  • scrollbar.shadow#3F4347
  • scrollbarSlider.background#3F4347
  • scrollbarSlider.hoverBackground#3F434700
  • selection.background#3F4347
  • settings.checkboxBackground#3F4347
  • settings.checkboxForeground#FFFFFF
  • settings.dropdownBackground#3F4347
  • settings.dropdownBorder#3F434700
  • settings.dropdownForeground#FFFFFF
  • settings.numberInputBackground#3F4347
  • settings.numberInputForeground#FFFFFF
  • settings.textInputBackground#3F4347
  • settings.textInputForeground#FFFFFF
  • sideBar.background#2b303b
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#2b303b
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#FFFFFF
  • statusBar.background#2b303b
  • statusBar.foreground#FFFFFF
  • statusBarItem.hoverBackground#99AAB5
  • statusBarItem.prominentBackground#99AAB5
  • tab.activeBackground#2b303b
  • tab.activeBorder#99AAB5
  • tab.activeForeground#FFFFFF
  • tab.border#2b303b
  • tab.inactiveBackground#2b303b
  • tab.inactiveForeground#99AAB5
  • terminal.border#2b303b
  • terminal.foreground#FFFFFF
  • textBlockQuote.background#FFFFFF
  • textPreformat.foreground#FFFFFF
  • titleBar.activeBackground#2b303b
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#2b303b
  • titleBar.inactiveForeground#99AAB5
  • widget.shadow#2b303b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C6370italic
comment markup.link#5C6370
entity.name.type#EED6AB
entity.other.inherited-class#BDD8A9
keyword#D090E3
keyword.control#D090E3
keyword.operator#ABB2BF
keyword.other.special-method#61AFEF
keyword.other.unit#D9AC81
storage#D090E3
storage.type.annotation, storage.type.primitive#D090E3
storage.modifier.package, storage.modifier.import#ABB2BF
constant#D9AC81
constant.variable#D9AC81
constant.character.escape#9ACCF4
constant.numeric#D9AC81
constant.other.color#9ACCF4
constant.other.symbol#9ACCF4
variable#E5868E
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#BDD8A9
string.regexp#9ACCF4
string.regexp source.ruby.embedded#EED6AB
string.other.link#E5868E
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#EED6ABbold
punctuation.definition.italic#D090E3italic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#EED6AB
support.type#9ACCF4
support.function#9ACCF4
support.function.any-method#61AFEF
entity.name.function#61AFEF
entity.name.class, entity.name.type.class#EED6AB
entity.name.section#61AFEF
entity.name.tag#E5868E
entity.other.attribute-name#D9AC81
entity.other.attribute-name.id#61AFEF
meta.class#EED6AB
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#E5868E
meta.link#D9AC81
meta.require#61AFEF
meta.selector#D090E3
meta.separator#ABB2BF
meta.tag#ABB2BF
underline
none#ABB2BF
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#D9AC81bold
markup.changed#D090E3
markup.deleted#E5868E
markup.italic#D090E3italic
markup.heading#E5868E
markup.heading punctuation.definition.heading#61AFEF
markup.link#D090E3
markup.inserted#BDD8A9
markup.quote#D9AC81
markup.raw#BDD8A9
source.c keyword.operator#D090E3
source.cpp keyword.operator#D090E3
source.cs keyword.operator#D090E3
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.gfm markup
source.gfm link entity#61AFEF
source.go storage.type.string#D090E3
source.ini keyword.other.definition.ini#E5868E
source.java storage.modifier.import#EED6AB
source.java storage.type#EED6AB
source.java keyword.operator.instanceof#D090E3
source.java-properties meta.key-pair#E5868E
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#9ACCF4
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#D090E3
source.json meta.structure.dictionary.json > string.quoted.json#E5868E
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#E5868E
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#BDD8A9
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#9ACCF4
source.ruby constant.other.symbol > punctuationinherit
source.python keyword.operator.logical.python#D090E3
source.python variable.parameter#D9AC81
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#ABB2BF
support.type.property-name#ABB2BF
string.quoted.double punctuation#BDD8A9
support.constant#D9AC81
support.type.property-name.json#E5868E
support.type.property-name.json punctuation#E5868E
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#9ACCF4
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#9ACCF4
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF
support.variable.dom.js, support.variable.dom.ts#E5868E
support.variable.property.dom.js, support.variable.property.dom.ts#E5868E
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#E5868E
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#E5868E
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#D090E3
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#D090E3
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#D9AC81
source.js support.variable, source.ts support.variable, source.tsx support.variable#E5868E
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#D9AC81
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#D090E3
source.ts keyword.operator, source.tsx keyword.operator#9ACCF4
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#E5868E
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#9ACCF4
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#E5868E
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#D9AC81
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#E5868E
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#BDD8A9
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#BDD8A9
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#EED6AB
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#E5868E
constant.language.json#9ACCF4
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#D9AC81
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#9ACCF4
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#BDD8A9
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#BDD8A9
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#D090E3
source.python constant.other#ABB2BF
source.python constant#D9AC81
constant.character.format.placeholder.other.python storage#D9AC81
support.variable.magic.python#E5868E
meta.function.parameters.python#D9AC81
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#E5868E
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#EED6AB
keyword.other.unsafe.rust#E5868E
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#E5868E
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#D9AC81
punctuation.separator.key-value.scss#E5868E
punctuation.definition.constant.scss#D9AC81
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#EED6AB
entity.name.section.markdown#E5868E
punctuation.definition.heading.markdown#E5868E
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D9AC81
markup.inline.raw.markdown#BDD8A9
beginning.punctuation.definition.list.markdown#E5868E
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#D090E3
markup.underline.link.markdown, markup.underline.link.image.markdown#D090E3
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF
punctuation.separator.variable.ruby#E5868E
variable.other.constant.ruby#D9AC81
keyword.operator.other.ruby#BDD8A9
punctuation.definition.variable.php#E5868E
meta.class.php#ABB2BF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Python Mix Theme - Coding Theme