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#1c2033
  • activityBar.border#1f233860
  • activityBar.foreground#A6ACCD
  • activityBarBadge.background#82abff
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#7c85b3
  • breadcrumb.activeSelectionForeground#748bf1
  • breadcrumb.background#1f2338
  • breadcrumb.focusForeground#A6ACCD
  • breadcrumb.foreground#777fab
  • breadcrumbPicker.background#1c2033
  • button.background#717CB450
  • contrastBorder#121523aa
  • debugToolBar.background#1c2033
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#1f2338
  • dropdown.border#00000066
  • editor.background#1f2338
  • editor.findMatchBackground#748bf155
  • editor.findMatchBorder#74c6f1bb
  • editor.findMatchHighlightBackground#748bf133
  • editor.findMatchHighlightBorder#748bf166
  • editor.foreground#A6ACCD
  • editor.lineHighlightBackground#292e45
  • editor.selectionBackground#717CB450
  • editor.selectionHighlightBackground#3c4361
  • editorBracketMatch.background#1f2338
  • editorBracketMatch.border#82abff50
  • editorCursor.foreground#82AAFF
  • editorError.foreground#FF537070
  • editorGroup.border#161a2a
  • editorGroupHeader.tabsBackground#1c2033
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82abff60
  • editorHoverWidget.background#1a1e30
  • editorHoverWidget.border#121523aa
  • editorIndentGuide.activeBackground#4E5579
  • editorIndentGuide.background#4E557970
  • editorLineNumber.activeForeground#9da5d7
  • editorLineNumber.foreground#5b6395
  • editorLink.activeForeground#A6ACCD
  • editorMarkerNavigation.background#A6ACCD05
  • editorOverviewRuler.border#1f2338
  • editorRuler.foreground#4E5579
  • editorSuggestWidget.background#1a1e30
  • editorSuggestWidget.border#e4f3fa10
  • editorSuggestWidget.foreground#A6ACCD
  • editorSuggestWidget.highlightForeground#748bf1
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#C3E88D70
  • editorWhitespace.foreground#A6ACCD40
  • editorWidget.background#1c2033
  • editorWidget.border
  • editorWidget.resizeBorder#748bf1
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#e4f3fa00
  • foreground#d8eaf7
  • gitDecoration.conflictingResourceForeground#ffdf9bcc
  • gitDecoration.deletedResourceForeground#FF5370CC
  • gitDecoration.ignoredResourceForeground#777fabcc
  • gitDecoration.modifiedResourceForeground#82abffcc
  • gitDecoration.untrackedResourceForeground#C3E88DCC
  • input.background#191a2a
  • input.border#00000066
  • input.foreground#e4f3fa
  • input.placeholderForeground#A6ACCDaa
  • inputValidation.errorBackground#c53b53
  • inputValidation.errorBorder#FF537050
  • inputValidation.errorForeground#FFFFFF
  • inputValidation.infoBackground#446bbb
  • inputValidation.infoBorder#82abff50
  • inputValidation.infoForeground#FFFFFF
  • inputValidation.warningBackground#ad7c43
  • inputValidation.warningBorder#ffdf9b50
  • inputValidation.warningForeground#FFFFFF
  • list.activeSelectionBackground#4a5eb7
  • list.activeSelectionForeground#e4f3fa
  • list.focusBackground#4a5eb7
  • list.focusForeground#e4f3fa
  • list.highlightForeground#748bf1
  • list.hoverBackground#1c2033
  • list.hoverForeground#e4f3fa
  • list.inactiveSelectionBackground#292e46
  • list.inactiveSelectionForeground#e4f3fa
  • menu.background#1c2033
  • menu.foreground#A6ACCD
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#748bf1
  • menu.separatorBackground#A6ACCD
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#748bf1
  • notificationLink.foreground#748bf1
  • notifications.background#1c2033
  • notifications.foreground#A6ACCD
  • panel.background#1c2033
  • panel.border#1f233860
  • panel.dropBackground#A6ACCD
  • panelTitle.activeBorder#748bf1
  • panelTitle.activeForeground#e4f3fa
  • panelTitle.inactiveForeground#A6ACCD
  • peekView.border#00000030
  • peekViewEditor.background#A6ACCD05
  • peekViewEditor.matchHighlightBackground#717CB450
  • peekViewEditorGutter.background#A6ACCD05
  • peekViewResult.background#A6ACCD05
  • peekViewResult.matchHighlightBackground#717CB450
  • peekViewResult.selectionBackground#7c85b370
  • peekViewTitle.background#A6ACCD05
  • peekViewTitleDescription.foreground#A6ACCD60
  • pickerGroup.foreground#748bf1
  • progressBar.background#748bf1
  • scrollbar.shadow#00000022
  • scrollbarSlider.activeBackground#748bf1
  • scrollbarSlider.background#A6ACCD20
  • scrollbarSlider.hoverBackground#A6ACCD10
  • selection.background#A6ACCD
  • settings.checkboxBackground#141725
  • settings.checkboxBorder#00000066
  • settings.checkboxForeground#A6ACCD
  • settings.dropdownBackground#191a2a
  • settings.dropdownBorder#00000066
  • settings.dropdownForeground#A6ACCD
  • settings.headerForeground#82abff
  • settings.modifiedItemIndicator#82abff
  • settings.numberInputBackground#191a2a
  • settings.numberInputBorder#00000066
  • settings.numberInputForeground#A6ACCD
  • settings.textInputBackground#191a2a
  • settings.textInputBorder#00000066
  • settings.textInputForeground#A6ACCD
  • sideBar.background#1c2033
  • sideBar.border#161a2a
  • sideBar.foreground#7c85b3
  • sideBarSectionHeader.background#1c2033
  • sideBarSectionHeader.border#1f233860
  • sideBarTitle.foreground#A6ACCD
  • statusBar.background#1c2033
  • statusBar.border#161a2a
  • statusBar.debuggingBackground#b69fff
  • statusBar.debuggingForeground#e4f3fa
  • statusBar.foreground#7c85b3
  • statusBar.noFolderBackground#1f2338
  • statusBarItem.hoverBackground#7c85b320
  • tab.activeBackground#22273d
  • tab.activeBorder#748bf1
  • tab.activeForeground#e4f3fa
  • tab.activeModifiedBorder#7c85b3
  • tab.border#161a2a
  • tab.inactiveBackground#1c2033
  • tab.inactiveForeground#7c85b3
  • tab.unfocusedActiveBorder#7c85b3
  • tab.unfocusedActiveForeground#A6ACCD
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82abff
  • terminal.ansiBrightBlack#7c85b3
  • terminal.ansiBrightBlue#82abff
  • terminal.ansiBrightCyan#7fdaff
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#b69fff
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#e4f3fa
  • terminal.ansiBrightYellow#ffdf9b
  • terminal.ansiCyan#7fdaff
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#b69fff
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#e4f3fa
  • terminal.ansiYellow#ffdf9b
  • textLink.activeForeground#b2dfff
  • textLink.foreground#5cc4ff
  • titleBar.activeBackground#1c2033
  • titleBar.activeForeground#A6ACCD
  • titleBar.border#161a2a
  • titleBar.inactiveBackground#1c2033
  • titleBar.inactiveForeground#7c85b3
  • widget.shadow#00000033

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#e4f3fa
comment, punctuation.definition.comment#8292df
variable, string constant.other.placeholder#e0eff5
constant.other.php#ffdf9b
constant.other.color#e4f3fa
text, meta.jsx.children#e0eff5
invalid, invalid.illegal#FF5370
invalid.deprecated#b69fff
keyword, storage.type, storage.modifier#b69fff
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.default, constant.other.color, punctuation, meta.tag, meta.block, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, keyword.operator, meta.brace#7fdaff
keyword.operator.spread, keyword.operator.rest#fa768fbold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#fa768f
entity.name.function, meta.function-call, variable.function, keyword.other.special-method#82abff
support.function, meta.object.member#5cc4ff
source.cpp meta.block variable.other#fa768f
variable.other.object
support.variable.property, variable.other.property#a4e9ff
meta.objectliteral punctuation.definition.block#aff1ff
meta.object-literal.key, entity.name.label.js#c3f293
support.variable.dom, support.constant.json, support.constant.math#ffd88c
support.other.variable, string.other.link#fa768f
constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#f989d3
constant.numeric, constant.language.infinity, constant.language.nan#ff9668
constant.language.undefined, constant.language.null#a6accdff
variable.parameter.function.language.special, variable.parameter#f0c4ff
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#7af3cdnormal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffdf9b
support.class.component#f989d3
support.type#B2CCD6
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#c3f293
keyword.other.unit#ff7f75
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#fa768f
meta.class-method.js entity.name.function.js, variable.function.constructor#82abff
entity.other.attribute-name#fcc487
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fcc487
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype entity.other.attribute-name#b69fff
source.css#7fdaff
entity.other.attribute-name.class#fcc487
support.type.property-name.css, support.type.property-name#82abff
meta.property-name.css, meta.property-name.scss, meta.property-name.less, support.type.vendored.property-name#98b4e6
support.constant.property-value.css, meta.property-value, support.constant.font-name.css, support.constant.vendored.property-value.css#a9eaff
variable.parameter.keyframe-list, meta.at-rule.keyframes entity.name.function#f989d3
entity.other.keyframe-offset, meta.at-rule.keyframes entity.other.attribute-name#c3f293
meta.attribute-selector#7af3cd
source.sass keyword.control#82abff
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#b69fff
string.regexp#a4e9ff
constant.other.character-class.regexp#c3f293
constant.other.character-class.set.regexp#fcc487
keyword.operator.quantifier.regexp#f989d3
constant.character.escape#7fdaff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82abff
source.js constant.other.object.key.js string.unquoted.label.js#FF5370
source.json meta.structure.dictionary.json support.type.property-name.json#82abff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5cc4ff
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#c3f293
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#f0c4ff
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#ffdf9b
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#b69fff
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#fa768f
text.html.markdown#e0eff5
text.html.markdown markup.inline.raw.markdown#b69fff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#4E5579
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#7fdaff
entity.name.section.markdown#82abff
markup.italic#fa768fitalic
markup.bold, markup.bold string#fa768fbold
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#fa768fbold
markup.underline#5cc4ffunderline
markup.strikestrike
markup.quote punctuation.definition.blockquote.markdown#4E5579
markup.quoteitalic
string.other.link.title.markdown#aff1ff
constant.other.reference.link.markdown#ffdf9b
markup.raw.block#b69fff
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#B2CCD6
variable.language.fenced.markdown#4E5579
meta.separator#4E5579bold
markup.table#A6ACCD
Allegory Theme by selfrefactor - VS Code Theme