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#2B3342
  • activityBar.border#343D4F
  • activityBar.dropBackground#2B3342cc
  • activityBar.foreground#d9d7ce
  • activityBarBadge.background#FFB520
  • activityBarBadge.foreground#000000e6
  • badge.background#FFBC33
  • badge.foreground#000000e6
  • button.background#FFB520
  • button.foreground#000000e6
  • button.hoverBackground#FFBC33
  • debugExceptionWidget.background#E9313B
  • debugExceptionWidget.border#E9313B
  • diffEditor.insertedTextBackground#9ADA421a
  • diffEditor.removedTextBackground#E9313B1a
  • dropdown.background#272E3B
  • dropdown.border#2F3849
  • dropdown.foreground#d9d7ce
  • dropdown.listBackground#2F3849
  • editor.background#202631
  • editor.findMatchBackground#ffdf803c
  • editor.findMatchHighlightBackground#ffffff16
  • editor.foreground#d9d7ce
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff0d
  • editor.rangeHighlightBackground#ffffff16
  • editor.selectionBackground#ffffff1a
  • editor.selectionHighlightBackground#ffffff16
  • editor.wordHighlightBackground#ffffff16
  • editor.wordHighlightStrongBackground#ffffff1a
  • editorBracketMatch.background#ffffff16
  • editorBracketMatch.border#ffffff16
  • editorCodeLens.foreground#ffffff16
  • editorCursor.foreground#ffd480
  • editorError.foreground#F28187
  • editorGroup.background#343D4F
  • editorGroup.border#ffffff12
  • editorGroup.dropBackground#2B3342cc
  • editorGroupHeader.noTabsBackground#272E3B
  • editorGroupHeader.tabsBackground#272E3B
  • editorGroupHeader.tabsBorder#343D4F
  • editorGutter.addedBackground#bae67eb3
  • editorGutter.background#232A36
  • editorGutter.deletedBackground#f07178b3
  • editorGutter.modifiedBackground#ffd580b3
  • editorHoverWidget.background#2F3849
  • editorIndentGuide.activeBackground#ffffff33
  • editorIndentGuide.background#ffffff1a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#ffffff33
  • editorLink.activeForeground#5ccfe6
  • editorMarkerNavigation.background#2B3342
  • editorMarkerNavigationError.background#f07178b3
  • editorMarkerNavigationWarning.background#ffd580b3
  • editorOverviewRuler.addedForeground#9ADA42
  • editorOverviewRuler.border#ffffff12
  • editorOverviewRuler.currentContentForeground#24BFDD1a
  • editorOverviewRuler.deletedForeground#E9313B
  • editorOverviewRuler.errorForeground#E9313B
  • editorOverviewRuler.findMatchForeground#ffdf803c
  • editorOverviewRuler.incomingContentForeground#FFBC331a
  • editorOverviewRuler.infoForeground#FFBC33
  • editorOverviewRuler.modifiedForeground#FFBC33
  • editorOverviewRuler.rangeHighlightForeground#ffffff16
  • editorOverviewRuler.selectionHighlightForeground#ffffff16
  • editorOverviewRuler.warningForeground#FFBC33
  • editorOverviewRuler.wordHighlightForeground#ffffff1a
  • editorOverviewRuler.wordHighlightStrongForeground#ffffff1a
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#2B3342
  • editorSuggestWidget.border#2B3342
  • editorSuggestWidget.foreground#d9d7ce
  • editorSuggestWidget.selectedBackground#ffffff26
  • editorWarning.foreground#FFDB93
  • editorWhitespace.foreground#ffffff16
  • editorWidget.background#2B3342
  • editorWidget.border#222935
  • errorForeground#F28187
  • extensionButton.prominentBackground#FFB520
  • extensionButton.prominentForeground#000000e6
  • extensionButton.prominentHoverBackground#F9A700
  • focusBorder#ffffff33
  • foreground#d9d7ce
  • gitDecoration.conflictingResourceForeground#FFDB93
  • gitDecoration.deletedResourceForeground#F28187
  • gitDecoration.ignoredResourceForeground#d9d7cea6
  • gitDecoration.modifiedResourceForeground#6AD3E8
  • gitDecoration.untrackedResourceForeground#C2E98D
  • input.background#272E3B
  • input.border#2F3849
  • input.foreground#d9d7ce
  • input.placeholderForeground#d9d7cea6
  • inputOption.activeBorder#2B3342
  • inputValidation.errorBackground#272E3B
  • inputValidation.errorBorder#E9313B
  • inputValidation.infoBackground#272E3B
  • inputValidation.infoBorder#24BFDD
  • inputValidation.warningBackground#272E3B
  • inputValidation.warningBorder#FFBC33
  • list.activeSelectionBackground#ffffff26
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#ffffff1a
  • list.focusBackground#ffffff33
  • list.focusForeground#FFFFFF
  • list.highlightForeground#FFD580
  • list.hoverBackground#ffffff1a
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#ffffff1f
  • list.inactiveSelectionBackground#ffffff21
  • list.inactiveSelectionForeground#FFFFFF
  • list.invalidItemForeground#F28187
  • merge.border#E9313B
  • merge.currentContentBackground#24BFDD1a
  • merge.currentHeaderBackground#24BFDD
  • merge.incomingContentBackground#FFBC331a
  • merge.incomingHeaderBackground#FFBC33
  • notificationCenter.border#F9A700
  • notificationCenterHeader.background#F9A700
  • notificationCenterHeader.foreground#000000e6
  • notificationLink.foreground#5ccfe6
  • notifications.background#222935
  • notifications.border#222935
  • notifications.foreground#FEFEFE
  • notificationToast.border#2B3342
  • panel.background#222935
  • panel.border#343D4F
  • panelTitle.activeBorder#F9A700
  • panelTitle.activeForeground#FEFEFE
  • panelTitle.inactiveForeground#B4B09E
  • peekView.border#2B3342
  • peekViewEditor.background#2F3849
  • peekViewEditor.matchHighlightBackground#ffffff16
  • peekViewEditorGutter.background#2F3849
  • peekViewResult.background#2F3849
  • peekViewResult.fileForeground#d9d7ce
  • peekViewResult.lineForeground#d9d7ce
  • peekViewResult.matchHighlightBackground#ffffff16
  • peekViewResult.selectionBackground#ffffff1a
  • peekViewResult.selectionForeground#d9d7ce
  • peekViewTitle.background#272E3B
  • peekViewTitleDescription.foreground#B4B09E
  • peekViewTitleLabel.foreground#EBEAE6
  • pickerGroup.border#2F3849
  • pickerGroup.foreground#C7C4B6
  • progressBar.background#FFD580
  • scrollbar.shadow#161921
  • scrollbarSlider.activeBackground#d9d7ce4d
  • scrollbarSlider.background#d9d7ce1a
  • scrollbarSlider.hoverBackground#d9d7ce33
  • selection.background#5ccfe6b3
  • sideBar.background#2B3342
  • sideBar.border#2B3342
  • sideBar.foreground#d9d7ce
  • sideBarSectionHeader.background#343D4F
  • sideBarSectionHeader.foreground#B4B09E
  • sideBarTitle.foreground#C7C4B6
  • statusBar.background#222935
  • statusBar.border#343D4F
  • statusBar.debuggingBackground#FFB520
  • statusBar.debuggingForeground#000000e6
  • statusBar.foreground#ffffffcc
  • statusBar.noFolderBackground#343D4F
  • statusBar.noFolderForeground#B4B09E
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff1a
  • statusBarItem.prominentBackground#F9A700
  • statusBarItem.prominentHoverBackground#FFBC33
  • tab.activeBackground#343D4F
  • tab.activeBorder#F9A700
  • tab.activeForeground#FEFEFE
  • tab.border#343D4F
  • tab.hoverBackground#343D4F
  • tab.inactiveBackground#222935
  • tab.inactiveForeground#C7C4B6
  • tab.unfocusedActiveForeground#C7C4B6
  • tab.unfocusedHoverBackground#343D4F
  • tab.unfocusedInactiveForeground#B4B09E
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#427ab3
  • terminal.ansiBrightBlack#686a66
  • terminal.ansiBrightBlue#84b0d8
  • terminal.ansiBrightCyan#37e6e8
  • terminal.ansiBrightGreen#99e343
  • terminal.ansiBrightMagenta#bc94b7
  • terminal.ansiBrightRed#f54235
  • terminal.ansiBrightWhite#f1f1f0
  • terminal.ansiBrightYellow#fdeb61
  • terminal.ansiCyan#00a7aa
  • terminal.ansiGreen#5ea702
  • terminal.ansiMagenta#89658e
  • terminal.ansiRed#d81e00
  • terminal.ansiWhite#dbded8
  • terminal.ansiYellow#cfae00
  • terminal.background#222935
  • terminal.foreground#d9d7ce
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#222935
  • titleBar.activeForeground#FEFEFE
  • titleBar.border#222935
  • titleBar.inactiveBackground#2F3849
  • titleBar.inactiveForeground#C7C4B6
  • walkThrough.embeddedEditorBackground#2B3342
  • welcomePage.buttonBackground#2F3849
  • welcomePage.buttonHoverBackground#343D4F
  • widget.shadow#161921

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#d9d7ce—
comment, punctuation.definition.comment#5d6874italic
variable, variable.other, variable.name#d9d7ce—
variable.parameter#d9d7ce—
variable.language, variable.scss, variable.less, variable.styl#f07076italic
punctuation.definition.variable#d9d7ceitalic
variable.other.constant#5ccfe6bold
constant, constant.other, constant.character#d3bdff—
support.type.property-name, constant.numeric, support.constant#ffae57—
meta.object-literal.key#ffd480—
constant.language#f07076italic
constant.character.escape, constant.other.placeholder#ffd480italic
invalid, invalid.illegal#f07076—
keyword, storage.type#d3bdff—
storage.modifier#f07076—
storage.modifier, storage.type, keyword.control—italic
keyword.operator, punctuation.accessor.#ffc670—
constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#d9d7ce—
entity.name#ffd480—
entity.name.tag, meta.tag.sgml#f07076
entity.name.function, entity.name.label, meta.function-call, variable.function, keyword.other.special-method, support.function, support.type, support.class#5ccfe6
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#bbe77e
meta.tag.attribute, entity.other.attribute-name#ffae57italic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#748290—
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class, source.styl entity.other.attribute-name.class, source.less entity.other.attribute-name.class#ffc670—
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id, source.styl entity.other.attribute-name.id, source.less entity.other.attribute-name.id#5ccfe6—
support.type.property-name.css#d9d7ce—
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#9fa8b2italic
*url*, *link*, *uri*#5ccfe6italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5ccfe6italic
source.json meta.structure.dictionary.json support.type.property-name.json#ffd480—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffae57—
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#d3bdff—
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#d9d7ce—
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#5ccfe6—
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#ffc670—
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#748290—
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#9fa8b2—
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#f07076—
text.html.markdown, punctuation.definition.list_item.markdown#748290—
text.html.markdown markup.inline.raw.markdown#d3bdff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9fa8b2—
text.html.markdown meta.dummy.line-break—
markdown.heading, markup.heading.markdown entity.name.section.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#f07076—
beginning.punctuation.definition.list.markdown#ffae57—
markup.italic#ffc670italic
markup.bold, markup.bold string#ffc670bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#ffc670bold italic
markup.underline#5ccfe6underline
markup.strike#5d6874strike
beginning.punctuation.definition.quote#ffffff13—
markup.quote#828e9bitalic
string.other.link.title.markdown#ffae57—
string.other.link.description.title.markdown#bbe77e—
constant.other.reference.link.markdown#ffc670—
markup.raw.block#d9d7ce—
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#d9d7ce—
meta.separator#d9d7cebold
markup.table#d9d7ce—
token.info-token#6AD3E8—
token.warn-token#FFDB93—
token.error-token#F28187—
token.debug-token#5ccfe6—
markup.deleted, punctuation.definition.deleted#F28187—
markup.inserted, punctuation.definition.inserted#C2E98D—
markup.changed, punctuation.definition.changed#6AD3E8—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php—italic
keyword.other.namespace.php, keyword.other.use.php—italic
meta.tag.sgml.doctype.html—italic
Allegory Theme by selfrefactor - VS Code Theme