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.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.inactiveModifiedBorder#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
—#ABB2BF—
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#ABB2BF—
string#98C379—
string.regexp#98C379—
string.detected-link#C678DD—
constant.numeric, markdown.python.constant.numeric#D19A66—
constant.language#D19A66italic
constant.character#56B6C2—
constant.character.escape.backslash.regexp#98C379—
constant.character.format.placeholder.other.python#D19A66—
constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#56B6C2—
variable.other.object#E06C75—
meta.property.object.js#D19A66—
variable.other.class, meta.class.property variable.other.property#E06C75—
variable.other, meta.class.object.property.js, meta.property.class variable.other.property.static#D19A66—
variable.other.readwrite#ABB2BF—
meta.group.braces variable.other.readwrite#ABB2BF—
variable.language, meta.class variable.other.readwrite#E06C75—
variable.language.prototype#E06C75—
python.support.magic.variable#E06C75—
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#61AFEF—
meta.function-call.generic.python#61AFEF—
meta.function.decorator.python#56B6C2—
variable.function.constructor#E5C07B—
keyword.control, keyword.operator.new, keyword.operator.module, variable.language.super#C678DD—
meta.preprocessor, entity.name.function.preprocessor#C678DD—
entity.name.function.preprocessor#E5C07B—
meta.namespace.identifier entity.name.type, entity.name.variable#E5C07B—
cs.meta.namespace.function.identifier.body.class.method#61AFEF—
storage.type.cs, storage.type.variable.cs#56B6C2—
keyword, keyword.other.namespace, storage.modifier,source.css meta.selector.css entity.other.attribute-name.pseudo-element.css#C678DDitalic
keyword.operator.logical.python#C678DD—
keyword.other.substitution.begin, keyword.other.substitution.end#56B6C2—
keyword.operator.accessor#ABB2BF—
keyword.operator, constant.other.color, punctuation.separator.key-value#56B6C2—
keyword.regexp, keyword.operator.quantifier.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#98C379—
python.keyword.operator#56B6C2—
storage.type#C678DD
entity.name.class, meta.class.extends variable.other.readwrite#E5C07B
entity.other.inherited-class#E5C07Bitalic underline
variable.parameter#ABB2BF
variable.parameter.function.language.python#D19A66
entity.name.tag#E06C75—
entity.other.attribute-name.html, entity.other.attribute-name.js, entity.other.attribute-name.jsx#D19A66italic
selector.css.entity.other.attribute-name#E5C07B—
variable.argument.css, variable.scss—italic
support.function, support.class support.function#56B6C2
python.builtin.support.function#C678DD
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin#E5C07B
meta.type.support.inheritance.python#56B6C2
entity.name.type.class.python#E5C07B—
support.constant#D19A66
support.type, support.class#E5C07B
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#98C379—
meta.structure.dictionary.json string.quoted.double.detected-link#C678DD—
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#E06C75—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E06C75—
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#E06C7590italic
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#E06C75—
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#E06C7590italic
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#E06C75—
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#E06C7590italic
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#E06C75—
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#E06C7590italic
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#61AFEF—
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD—
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#D19A66—
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#D19A66—
markdown.block.fenced.code.string, markdown.block.fenced.code.string.quote#98C379—
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#61AFEF—
markdown.block.fenced.code.operator.assignment#ABB2BF—
markdown.block.variable.parameter#D19A66—
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#E5C07B—
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#98C378—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#E06C74—