Shopify Theme
Publisher: ecmasxThemes in package: 4
A collection of Shopify-inspired dark themes including Dark, Midnight, and Purple variants. Features unified syntax highlighting with unique UI color schemes for each 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#462B52
- activityBar.border#2F093C
- activityBarBadge.background#8F5DA5
- activityBarBadge.foreground#FFF
- badge.background#8F5DA5
- badge.foreground#FFF
- breadcrumb.activeSelectionForeground#FEE8F4
- breadcrumb.background#462B52
- breadcrumb.focusForeground#FEE8F4
- breadcrumb.foreground#A4DFFD
- button.background#25152D
- button.border#8F5DA5
- button.foreground#D793BB
- button.hoverBackground#2F093C
- button.secondaryBackground#2F093C
- button.secondaryForeground#D793BB
- button.secondaryHoverBackground#25152D
- chat.avatarBackground#25152D
- chat.avatarForeground#8F5DA5
- chat.requestBackground#25152D
- chat.requestBorder#6A4378
- chat.slashCommandBackground#6A4378
- chat.slashCommandForeground#8F5DA5
- checkbox.background#25152D
- checkbox.border#8F5DA5
- checkbox.foreground#D793BB
- dropdown.background#5A3967
- dropdown.border#8F5DA5
- dropdown.listBackground#2F093C
- editor.background#462B52
- editor.findMatchBackground#8F5DA5
- editor.findMatchBorder#D793BB
- editor.findMatchHighlightBackground#2F093C
- editor.findMatchHighlightBorder#8F5DA5
- editor.findRangeHighlightBackground#25152D
- editor.foreground#FEE8F4
- editor.lineHighlightBackground#5A3967
- editor.lineHighlightBorder#5A3967
- editor.selectionBackground#3A1E48
- editorGroup.border#2F093C
- editorGroupHeader.border#2F093C
- editorGroupHeader.tabsBackground#462B52
- editorGroupHeader.tabsBorder#2F093C
- editorHoverWidget.background#462B52
- editorHoverWidget.border#8F5DA5
- editorLineNumber.activeForeground#D793BB
- editorLineNumber.foreground#D793BB
- editorSuggestWidget.background#5A3967
- editorSuggestWidget.border#8F5DA5
- editorWidget.background#25152D
- editorWidget.border#8F5DA5
- editorWidget.foreground#D793BB
- editorWidget.resizeBorder#8F5DA5
- errorForeground#BE7782
- extensionButton.prominentBackground#25152D
- extensionButton.prominentForeground#D793BB
- extensionButton.prominentHoverBackground#2F093C
- focusBorder#8F5DA5
- foreground#FEE8F4
- icon.foreground#D793BB
- inlineChat.background#25152D
- inlineChat.border#6A4378
- inlineChat.foreground#8F5DA5
- inlineChatInput.background#2F093C
- inlineChatInput.border#6A4378
- inlineChatInput.focusBorder#8F5DA5
- inlineChatInput.foreground#8F5DA5
- inlineChatInput.placeholderForeground#9F7FA5
- input.background#5A3967
- input.border#8F5DA5
- input.foreground#D793BB
- inputOption.activeBorder#8F5DA5
- interactive.activeCodeBorder#8F5DA5
- interactive.inactiveCodeBorder#6A4378
- list.activeSelectionBackground#6A4378
- list.activeSelectionForeground#D793BB
- list.focusForeground#D793BB
- list.focusOutline#8F5DA5
- list.hoverBackground#3D2548
- list.hoverForeground#D793BB
- list.inactiveSelectionBackground#5A3967
- menu.background#462B52
- menubar.selectionBackground#462B52
- notification.background#462B52
- notification.border#8F5DA5
- notification.buttonBackground#25152D
- notification.buttonBorder#8F5DA5
- notification.buttonForeground#D793BB
- notification.errorBackground#462B52
- notification.errorForeground#BE7782
- notification.foreground#D793BB
- notification.infoBackground#462B52
- notification.infoForeground#A4DFFD
- notification.warningBackground#462B52
- notification.warningForeground#BE7782
- panel.background#462B52
- panel.border#2F093C
- panelTitle.activeBorder#462B52
- panelTitle.inactiveForeground#D793BB
- pickerGroup.border#8F5DA5
- pickerGroup.foreground#D793BB
- progressBar.background#8F5DA5
- quickInput.background#5A3967
- quickInput.foreground#D793BB
- quickInputList.focusBackground#6A4378
- quickInputList.focusForeground#D793BB
- quickInputTitle.background#25152D
- scrollbar.shadow#25152D
- scrollbarSlider.activeBackground#8A6398
- scrollbarSlider.background#6A4378
- scrollbarSlider.hoverBackground#7A5388
- searchEditor.findMatchBackground#8F5DA5
- searchEditor.findMatchBorder#D793BB
- searchEditor.textInputBorder#8F5DA5
- selection.background#5A3967
- sideBar.background#462B52
- sideBar.border#2F093C
- sideBar.foreground#D793BB
- sideBarSectionHeader.background#462B52
- statusBar.background#462B52
- statusBar.border#2F093C
- statusBar.debuggingBackground#462B52
- statusBar.noFolderBackground#462B52
- symbolIcon.colorForeground#D793BB
- tab.activeBackground#462B52
- tab.activeBorder#00000000
- tab.activeBorderTop#8F5DA5
- tab.border#00000000
- tab.hoverBackground#462B52
- tab.hoverBorder#00000000
- tab.inactiveBackground#462B52
- tab.unfocusedHoverBackground#462B52
- tab.unfocusedHoverBorder#00000000
- terminal.background#462B52
- titleBar.activeBackground#462B52
- titleBar.inactiveBackground#462B52
- tree.indentGuidesStroke#D793BB
- widget.shadow#00000050
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.type.property-name.json, meta.structure.dictionary.key.json, string.quoted.double.json support.type.property-name.json | #A4DFFD | — |
| entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx | #D8F6D6 | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.jsx, punctuation.definition.tag.tsx, punctuation.definition.block, punctuation.definition.parameters, punctuation.section.embedded | #A4DFFD | — |
| text.html, source.js, source.jsx, source.tsx, source.css, text.xml | #A4DFFD | — |
| entity.other.attribute-name.class.html, entity.other.attribute-name.class.css, entity.other.attribute-name.class | #F3F972 | — |
| entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.html, entity.other.attribute-name.id.html | #9DB8F7 | — |
| string.quoted.double, string.quoted.single, string.template, string.interpolated | #FE9F9B | — |
| variable.other, variable.parameter, variable.language, variable.other.liquid, punctuation.definition.variable.liquid | #08F4B9 | — |
| keyword.control, keyword.control.conditional, keyword.control.loop, keyword.liquid, keyword.function, storage.type.function, keyword.other, storage.type | #9DB8F7 | — |
| entity.name.function, support.function, meta.function-call, entity.name.function.js, entity.name.function.liquid | #A4DFFD | — |
| variable.parameter.function, meta.function.parameters variable, meta.function-call.arguments variable | #08F4B9 | — |
| punctuation.definition.liquid, entity.name.tag.liquid, meta.tag.liquid | #A4DFFD | — |
| support.function.liquid, entity.name.function.liquid | #F3F972 | — |
| variable.other.liquid, punctuation.definition.variable.liquid, support.variable.liquid | #08F4B9 | — |
| keyword.control.liquid, keyword.control.conditional.liquid, keyword.control.loop.liquid | #9DB8F7 | — |
| variable.other.property, support.variable.property, meta.property-name | #A4DFFD | — |
| constant.numeric.liquid, constant.numeric | #62F44C | — |
| comment, punctuation.definition.comment, comment.line.double-slash, comment.block | #95A7D5 | italic |
| comment.block.liquid, punctuation.definition.comment.liquid | #D7D7DB | italic |
| entity.name.class, entity.name.type, support.type | #9DB8F7 | — |
| constant.language, constant.character, variable.language.this | #9DB8F7 | — |
| support.type.property-name.css, support.type.vendored.property-name.css, variable.other.property.css, variable.css, variable.scss, variable.other.less | #DDE2F1 | — |
| punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.block.js, punctuation.definition.block.jsx, punctuation.definition.block.tsx, meta.brace.round, meta.brace.square, meta.brace.curly | #EFF1F1 | — |