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#EDEDED
  • activityBar.border#E8E8E8
  • activityBar.dropBackground#EDEDEDcc
  • activityBar.foreground#5c6066
  • activityBarBadge.background#B54309
  • activityBarBadge.foreground#ffffffe6
  • badge.background#C2470A
  • badge.foreground#ffffffe6
  • button.background#B54309
  • button.foreground#ffffffe6
  • button.hoverBackground#C2470A
  • debugExceptionWidget.background#E9313B
  • debugExceptionWidget.border#E9313B
  • diffEditor.insertedTextBackground#6B8F001a
  • diffEditor.removedTextBackground#E9313B1a
  • dropdown.background#E8E8E8
  • dropdown.border#E8E8E8
  • dropdown.foreground#5c6066
  • dropdown.listBackground#EDEDED
  • editor.background#fafafa
  • editor.findMatchBackground#f8dc873c
  • editor.findMatchHighlightBackground#00000016
  • editor.foreground#5c6066
  • editor.inactiveSelectionBackground#00000010
  • editor.lineHighlightBackground#0000000d
  • editor.rangeHighlightBackground#00000016
  • editor.selectionBackground#0000001a
  • editor.selectionHighlightBackground#00000016
  • editor.wordHighlightBackground#00000016
  • editor.wordHighlightStrongBackground#0000001a
  • editorBracketMatch.background#00000016
  • editorBracketMatch.border#00000016
  • editorCodeLens.foreground#00000016
  • editorCursor.foreground#f4590b
  • editorError.foreground#ED515A
  • editorGroup.background#F9F9F9
  • editorGroup.border#0000001a
  • editorGroup.dropBackground#EDEDEDcc
  • editorGroupHeader.noTabsBackground#E8E8E8
  • editorGroupHeader.tabsBackground#E8E8E8
  • editorGroupHeader.tabsBorder#F9F9F9
  • editorGutter.addedBackground#86b300b3
  • editorGutter.background#F3F3F3
  • editorGutter.deletedBackground#f07178b3
  • editorGutter.modifiedBackground#f29718b3
  • editorHoverWidget.background#F2F2F2
  • editorIndentGuide.activeBackground#00000033
  • editorIndentGuide.background#0000001a
  • editorLineNumber.activeForeground#ffffff5a
  • editorLineNumber.foreground#00000033
  • editorLink.activeForeground#3fa6d9
  • editorMarkerNavigation.background#EDEDED
  • editorMarkerNavigationError.background#f07178b3
  • editorMarkerNavigationWarning.background#f29718b3
  • editorOverviewRuler.addedForeground#6B8F00
  • editorOverviewRuler.border#0000001a
  • editorOverviewRuler.currentContentForeground#268ABC1a
  • editorOverviewRuler.deletedForeground#E9313B
  • editorOverviewRuler.errorForeground#E9313B
  • editorOverviewRuler.findMatchForeground#f8dc873c
  • editorOverviewRuler.incomingContentForeground#C97A0B1a
  • editorOverviewRuler.infoForeground#C97A0B
  • editorOverviewRuler.modifiedForeground#C97A0B
  • editorOverviewRuler.rangeHighlightForeground#00000016
  • editorOverviewRuler.selectionHighlightForeground#00000016
  • editorOverviewRuler.warningForeground#C97A0B
  • editorOverviewRuler.wordHighlightForeground#0000001a
  • editorOverviewRuler.wordHighlightStrongForeground#0000001a
  • editorRuler.foreground#0000001a
  • editorSuggestWidget.background#EDEDED
  • editorSuggestWidget.border#E8E8E8
  • editorSuggestWidget.foreground#5c6066
  • editorSuggestWidget.selectedBackground#E8E8E8
  • editorWarning.foreground#B06B0A
  • editorWhitespace.foreground#00000016
  • editorWidget.background#EDEDED
  • editorWidget.border#E8E8E8
  • errorForeground#ED515A
  • extensionButton.prominentBackground#B54309
  • extensionButton.prominentForeground#ffffffe6
  • extensionButton.prominentHoverBackground#9D3A08
  • focusBorder#00000026
  • foreground#5c6066
  • gitDecoration.conflictingResourceForeground#ED515A
  • gitDecoration.deletedResourceForeground#ED515A
  • gitDecoration.ignoredResourceForeground#5c6066a6
  • gitDecoration.modifiedResourceForeground#2178A4
  • gitDecoration.untrackedResourceForeground#5E7D00
  • input.background#F2F2F2
  • input.border#E8E8E8
  • input.foreground#5c6066
  • input.placeholderForeground#5c6066a6
  • inputOption.activeBorder#E1E1E1
  • inputValidation.errorBackground#E8E8E8
  • inputValidation.errorBorder#E9313B
  • inputValidation.infoBackground#E8E8E8
  • inputValidation.infoBorder#268ABC
  • inputValidation.warningBackground#E8E8E8
  • inputValidation.warningBorder#C97A0B
  • list.activeSelectionBackground#0000001a
  • list.activeSelectionForeground#55585E
  • list.dropBackground#0000000d
  • list.focusBackground#00000026
  • list.focusForeground#565A60
  • list.highlightForeground#F2590C
  • list.hoverBackground#0000000d
  • list.hoverForeground#5A5E64
  • list.inactiveFocusBackground#00000012
  • list.inactiveSelectionBackground#00000014
  • list.inactiveSelectionForeground#585C62
  • list.invalidItemForeground#ED515A
  • merge.border#E9313B
  • merge.currentContentBackground#268ABC1a
  • merge.currentHeaderBackground#268ABC
  • merge.incomingContentBackground#C97A0B1a
  • merge.incomingHeaderBackground#C97A0B
  • notificationCenter.border#9D3A08
  • notificationCenterHeader.background#9D3A08
  • notificationCenterHeader.foreground#ffffffe6
  • notificationLink.foreground#3fa6d9
  • notifications.background#E1E1E1
  • notifications.border#E1E1E1
  • notifications.foreground#61656B
  • notificationToast.border#EDEDED
  • panel.background#F9F9F9
  • panel.border#E1E1E1
  • panelTitle.activeBorder#9D3A08
  • panelTitle.activeForeground#61656B
  • panelTitle.inactiveForeground#575B61
  • peekView.border#EDEDED
  • peekViewEditor.background#F2F2F2
  • peekViewEditor.matchHighlightBackground#00000016
  • peekViewEditorGutter.background#F2F2F2
  • peekViewResult.background#F2F2F2
  • peekViewResult.fileForeground#5c6066
  • peekViewResult.lineForeground#5c6066
  • peekViewResult.matchHighlightBackground#00000016
  • peekViewResult.selectionBackground#0000001a
  • peekViewResult.selectionForeground#5c6066
  • peekViewTitle.background#E8E8E8
  • peekViewTitleDescription.foreground#575B61
  • peekViewTitleLabel.foreground#5E6268
  • pickerGroup.border#F2F2F2
  • pickerGroup.foreground#5A5E64
  • progressBar.background#F2590C
  • scrollbar.shadow#E8E8E8
  • scrollbarSlider.activeBackground#5c60664d
  • scrollbarSlider.background#5c60661a
  • scrollbarSlider.hoverBackground#5c606633
  • selection.background#41a6d9b3
  • sideBar.background#F9F9F9
  • sideBar.border#EDEDED
  • sideBar.foreground#5c6066
  • sideBarSectionHeader.background#EDEDED
  • sideBarSectionHeader.foreground#5c6066
  • sideBarTitle.foreground#5A5E64
  • statusBar.background#EDEDED
  • statusBar.border#E8E8E8
  • statusBar.debuggingBackground#B54309
  • statusBar.debuggingForeground#ffffffe6
  • statusBar.foreground#000000cc
  • statusBar.noFolderBackground#EDEDED
  • statusBar.noFolderForeground#575B61
  • statusBarItem.activeBackground#0000001a
  • statusBarItem.hoverBackground#0000000d
  • statusBarItem.prominentBackground#9D3A08
  • statusBarItem.prominentHoverBackground#C2470A
  • tab.activeBackground#F9F9F9
  • tab.activeBorder#9D3A08
  • tab.activeForeground#5c6066
  • tab.border#E1E1E1
  • tab.hoverBackground#F2F2F2
  • tab.inactiveBackground#E8E8E8
  • tab.inactiveForeground#5A5E64
  • tab.unfocusedActiveForeground#5A5E64
  • tab.unfocusedHoverBackground#F9F9F9
  • tab.unfocusedInactiveForeground#575B61
  • 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#EDEDED
  • terminal.foreground#5c6066
  • terminal.selectionBackground#c1deff5a
  • titleBar.activeBackground#E8E8E8
  • titleBar.activeForeground#61656B
  • titleBar.border#E1E1E1
  • titleBar.inactiveBackground#EDEDED
  • titleBar.inactiveForeground#5A5E64
  • walkThrough.embeddedEditorBackground#EDEDED
  • welcomePage.buttonBackground#F2F2F2
  • welcomePage.buttonHoverBackground#F9F9F9
  • widget.shadow#E8E8E8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#5c6066
comment, punctuation.definition.comment#aaafb5italic
variable, variable.other, variable.name#575B61
variable.parameter#575B61
variable.language, variable.scss, variable.less, variable.styl#f07076italic
punctuation.definition.variable#575B61italic
variable.other.constant#3fa6d9bold
constant, constant.other, constant.character#a37acd
support.type.property-name, constant.numeric, support.constant#f4590b
meta.object-literal.key#f29718
constant.language#f07076italic
constant.character.escape, constant.other.placeholder#f29718italic
invalid, invalid.illegal#f07076
keyword, storage.type#a37acd
storage.modifier#f07076
storage.modifier, storage.type, keyword.controlitalic
keyword.operator, punctuation.accessor.#f37e12
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#575B61
entity.name#f29718
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#3fa6d9
string, entity.other.inherited-class, markup.heading, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#86b300
meta.tag.attribute, entity.other.attribute-name#f4590bitalic
punctuation.terminator, punctuation.separator, meta.property-list.scss, meta.property-list.css, meta.property-list.styl, meta.property-list.less, punctuation.separator.inheritance#8f969e
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#f37e12
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#3fa6d9
support.type.property-name.css#575B61
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#687078italic
*url*, *link*, *uri*#3fa6d9italic underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#3fa6d9italic
source.json meta.structure.dictionary.json support.type.property-name.json#f29718
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f4590b
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#a37acd
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#575B61
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#3fa6d9
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#f37e12
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#8f969e
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#687078
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#8f969e
text.html.markdown markup.inline.raw.markdown#a37acd
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#687078
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#f4590b
markup.italic#f37e12italic
markup.bold, markup.bold string#f37e12bold
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#f37e12bold italic
markup.underline#3fa6d9underline
markup.strike#aaafb5strike
beginning.punctuation.definition.quote#00000013
markup.quote#818992italic
string.other.link.title.markdown#f4590b
string.other.link.description.title.markdown#86b300
constant.other.reference.link.markdown#f37e12
markup.raw.block#575B61
markup.raw.block.fenced.markdown, markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#575B61
meta.separator#5c6066bold
markup.table#5c6066
token.info-token#2178A4
token.warn-token#B06B0A
token.error-token#ED515A
token.debug-token#3fa6d9
markup.deleted, punctuation.definition.deleted#ED515A
markup.inserted, punctuation.definition.inserted#5E7D00
markup.changed, punctuation.definition.changed#2178A4
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.phpitalic
keyword.other.namespace.php, keyword.other.use.phpitalic
meta.tag.sgml.doctype.htmlitalic
Allegory Theme by selfrefactor - VS Code Theme