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#101119
  • activityBar.dropBackground#AE81FF7B
  • activityBar.foreground#C8DDFCCC
  • activityBar.inactiveForeground#C8DDFC40
  • activityBarBadge.background#8A78FE
  • activityBarBadge.foreground#101119
  • badge.background#8A78FECC
  • badge.foreground#101119
  • breadcrumb.activeSelectionForeground#C8DDFC
  • breadcrumb.background#222330
  • breadcrumb.focusForeground#C8DDFC
  • breadcrumb.foreground#C8DDFC40
  • button.background#AE81FF7B
  • button.hoverBackground#AE81FF3B
  • debugToolBar.background#101119
  • dropdown.background#0D0E14
  • dropdown.border#292A32
  • editor.background#161821
  • editor.editor.findMatchBackground#42557B
  • editor.findMatchBackground#8A78FE
  • editor.findMatchHighlightBackground#5755D950
  • editor.findRangeHighlightBackground#8A78FE
  • editor.foreground#AAB1C0
  • editor.hoverHighlightBackground#42557BAB
  • editor.lineHighlightBackground#101119
  • editor.rangeHighlightBackground#39336870
  • editor.selectionBackground#5755D930
  • editor.selectionHighlightBackground#42557B40
  • editor.wordHighlightBackground#5755D930
  • editorActiveLineNumber.foreground#C8DDFC9A
  • editorBracketMatch.background#AE81FF20
  • editorBracketMatch.border#6D57FF
  • editorCursor.foreground#FFCC00
  • editorGroup.border#292A32
  • editorGroup.dropBackground#AE81FF3B
  • editorGroupHeader.tabsBackground#222330
  • editorHoverWidget.background#0D0E14
  • editorHoverWidget.border#292A32
  • editorIndentGuide.activeBackground#6D57FFBB
  • editorIndentGuide.background#6262a430
  • editorLineNumber.foreground#5C637050
  • editorLink.activeForeground#FFCC00AB
  • editorRuler.foreground#6272a430
  • editorSuggestWidget.background#0D0E14
  • editorSuggestWidget.border#292A32
  • editorSuggestWidget.selectedBackground#6D57FF7B
  • editorWhitespace.foreground#6272a460
  • editorWidget.background#222330
  • editorWidget.border#6D57FF7B
  • errorForeground#E50A69
  • focusBorder#AE81FF6B
  • foreground#C8DDFC
  • gitDecoration.modifiedResourceForeground#D18C4E
  • gitDecoration.untrackedResourceForeground#C8DDFC
  • input.background#0D0E14
  • input.foreground#C8DDFCDC
  • input.placeholderForeground#C8DDFC5B
  • inputOption.activeBorder#8A78FE
  • inputValidation.errorBackground#830C37
  • inputValidation.errorBorder#E50A69
  • inputValidation.infoBackground#161821
  • inputValidation.infoBorder#AE81FF6B
  • list.activeSelectionBackground#AE81FF1B
  • list.activeSelectionForeground#C8DDFC
  • list.focusBackground#AE81FF3B
  • list.highlightForeground#8A78FE
  • list.hoverBackground#AE81FF3B
  • list.hoverForeground#C8DDFC
  • list.inactiveSelectionBackground#AE81FF1B
  • list.inactiveSelectionForeground#C8DDFCAB
  • notification.background#222330
  • notification.buttonBackground#6D57FF7B
  • notification.buttonHoverBackground#6D57FF
  • notification.foreground#C8DDFCBB
  • notification.infoBackground#6D57FF7B
  • panel.border#292A32AB
  • panelTitle.activeBorder#AE81FFAB
  • panelTitle.activeForeground#C8DDFC
  • panelTitle.inactiveForeground#C8DDFC9A
  • peekView.border#AE81FFAB
  • peekViewEditor.background#161821
  • peekViewEditor.matchHighlightBackground#23262E60
  • peekViewResult.background#222330
  • peekViewResult.lineForeground#C8DDFC
  • peekViewResult.matchHighlightBackground#8A78FEAB
  • peekViewResult.selectionBackground#AE81FF3B
  • peekViewResult.selectionForeground#C8DDFC
  • peekViewTitle.background#222330
  • pickerGroup.border#AE81FF6B
  • pickerGroup.foreground#C8DDFCBB
  • progressBar.background#8A78FE
  • scrollbarSlider.activeBackground#AE81FF7B
  • scrollbarSlider.background#AE81FF1B
  • scrollbarSlider.hoverBackground#AE81FF3B
  • selection.background#5755D970
  • sideBar.background#222330
  • sideBar.foreground#C8DDFC9A
  • sideBarSectionHeader.background#10111970
  • sideBarSectionHeader.border#292A32
  • sideBarSectionHeader.foreground#C8DDFC9A
  • sideBarTitle.foreground#C8DDFC9A
  • statusBar.background#101119
  • statusBar.debuggingBackground#473C9B
  • statusBar.foreground#C8DDFC9A
  • statusBar.noFolderBackground#5755d980
  • statusBarItem.activeBackground#473C9B90
  • statusBarItem.hoverBackground#5542C3
  • tab.activeBackground#101119
  • tab.activeBorder#8A78FEAB
  • tab.activeForeground#C8DDFC
  • tab.activeModifiedBorder#8b78ff
  • tab.border#1618217A
  • tab.hoverBackground#10111980
  • tab.inactiveBackground#282D35AB
  • tab.inactiveForeground#C8DDFC7D
  • tab.inactiveModifedBorder#f5008280
  • tab.unfocusedActiveBorder#ae81ff50
  • tab.unfocusedHoverBorder#8A78FEAB
  • textLink.activeForeground#6D57FF
  • textLink.foreground#8A78FE
  • titleBar.activeBackground#101119
  • titleBar.activeForeground#ABB1BAAB
  • titleBar.inactiveBackground#161821
  • titleBar.inactiveForeground#ABB1BAAB
  • widget.shadow#0F1014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#A6B2C0—
comment, punctuation.definition.comment#5C6370italic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python#5C6370italic
meta.brace.round.begin, meta.brace.round.end, meta.brace.square.begin, meta.brace.square.end, meta.brace.curly.begin.js, meta.brace.curly.end.js, meta.group.braces.round.function.arguments#A6B2C0—
string#89CA78—
string.regexp#89CA78—
string.detected-link#D55FDE—
constant.numeric, markdown.python.constant.numeric#D18C4E—
constant.language#D18C4Eitalic
constant.character#56B6C2—
constant.character.escape.backslash.regexp#89CA78—
constant.character.format.placeholder.other.python#D18C4E—
constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#56B6C2—
variable.other.object#EF596F—
meta.property.object.js#D18C4E—
variable.other.class, meta.class.property variable.other.property#EF596F—
variable.other, meta.class.object.property.js, meta.property.class variable.other.property.static#D18C4E—
variable.other.readwrite#A6B2C0—
meta.group.braces variable.other.readwrite#A6B2C0—
variable.language, meta.class variable.other.readwrite#EF596F—
variable.language.prototype#EF596F—
python.support.magic.variable#EF596F—
variable.function, entity.name.function, entity.name.function.arrow, meta.class-method.js entity.name.function.js, meta.method.property.js entity.name.function.js#3facff—
meta.function-call.generic.python#3facff—
meta.function.decorator.python#56B6C2—
variable.function.constructor#F6C467—
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super#D55FDE—
meta.preprocessor, entity.name.function.preprocessor#D55FDE—
entity.name.function.preprocessor#F6C467—
meta.namespace.identifier entity.name.type, entity.name.variable#F6C467—
cs.meta.namespace.function.identifier.body.class.method#3facff—
storage.type.cs, storage.type.variable.cs#56B6C2—
keyword, storage.modifier,source.css meta.selector.css entity.other.attribute-name.pseudo-element.css#D55FDEitalic
keyword.operator.logical.python#D55FDE—
keyword.other.substitution.begin, keyword.other.substitution.end#56B6C2—
keyword.operator.accessor#A6B2C0—
keyword.operator, constant.other.color, punctuation.separator.key-value#56B6C2—
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#89CA78—
python.keyword.operator#56B6C2—
storage.type#D55FDE
entity.name.class, meta.class.extends variable.other.readwrite#F6C467
entity.other.inherited-class#F6C467italic underline
variable.parameter#A6B2C0
variable.parameter.function.language.python#D18C4E
entity.name.tag#EF596F—
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx#D18C4Eitalic
selector.css.entity.other.attribute-name#F6C467—
variable.argument.css, variable.scss—italic
support.function, support.class support.function#56B6C2
python.builtin.support.function#D55FDE
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin#F6C467
meta.type.support.inheritance.python#56B6C2
entity.name.type.class.python#F6C467—
support.constant#D18C4E
support.type, support.class#F6C467
support.other.variable—
css.property-list.property-name,source.css meta.selector.css entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css#56B6C2
invalid#FFFFFF—
invalid.deprecated#523D14—
meta.structure.dictionary.json string.quoted.double.json#89CA78—
meta.structure.dictionary.json string.quoted.double.detected-link#D55FDE—
source.json meta.structure.dictionary.json support.type.property-name.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F90italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F90italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F90italic
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#EF596F90italic
punctuation.definition.block.sequence.item.yaml#D55FDE—
string.unquoted.plain.out.yaml#89CA78—
markup.heading#EF596F—
string.other.link.title.markdown, string.other.link.description.markdown, meta.paragraph.markdown entity.name.tag.inline.any#3facff—
markup.underline.link.markdown, markup.underline.link.image.markdown#D55FDE—
markup.bold.markdown—bold
markup.fenced_code.block.markdown, markup.fenced.code.block.markdown, markup.raw.inline.markdown, markdown.block.raw#56B6C2—
markup.fenced_code.block.markdown fenced_code.block.language, markup.fenced.code.block.markdown fenced.code.block.language#D18C4E—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown, punctuation.definition.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.raw.markdown, meta.paragraph.markdown punctuation.definition.tag#56B6C2—
markdown.fenced_code.block.markdown constant.numeric, markdown.fenced.code.block.markdown constant.numeric, markdown.fenced_code.block.markdown constant.language, markdown.fenced.code.block.markdown constant.language#D18C4E—
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote#89CA78—
markup.fenced_code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.operator.logical.python, markup.fenced.code.block.markdown keyword.operator, markup.fenced_code.block.markdown keyword.control, markup.fenced.code.block.markdown keyword.control, markup.fenced_code.block.markdown storage.type, markup.fenced_code.block.markdown storage.type.function.lambda, markdown.block.fenced.code.lambda.storage.type#3FACFF—
markdown.block.fenced.code.operator.assignment#A6B2C0—
markdown.block.variable.parameter#D18C4E—
meta.diff, meta.diff.header#75715E—
markup.deleted#F92672—
markup.inserted#A6E22E—
markup.changed#E6DB74—
constant.numeric.line-number.find-in-files - match#AE81FFA0—
entity.name.filename.find-in-files#E6DB74—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
entity.name.type.instance.jsdoc#F6C467—
punctuation.output.jekyll, punctuation.tag.jekyll, punctuation.output.liquid, punctuation.tag.liquid#C8DDFCD1—
frontmatter.jekyll, frontmatter.liquid#C8DDFCD1—
entity.name.tag.jekyll, entity.name.tag.jekyll#F92672italic
variable.other.jekyll, variable.other.liquid#b267e6—
punctuation.definition.string.begin, punctuation.definition.string.end#89CA77—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#EF596E—