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#304B4F
- activityBar.border#20292B
- activityBarBadge.background#4A9B8E
- activityBarBadge.foreground#FFF
- badge.background#4A9B8E
- badge.foreground#FFF
- breadcrumb.activeSelectionForeground#EFF1F1
- breadcrumb.background#304B4F
- breadcrumb.focusForeground#EFF1F1
- breadcrumb.foreground#A4DFFD
- button.background#20292B
- button.border#59767A
- button.foreground#8A8F93
- button.hoverBackground#0A1D26
- button.secondaryBackground#0A1D26
- button.secondaryForeground#8A8F93
- button.secondaryHoverBackground#20292B
- chat.avatarBackground#20292B
- chat.avatarForeground#4A9B8E
- chat.requestBackground#20292B
- chat.requestBorder#4A6B70
- chat.slashCommandBackground#4A6B70
- chat.slashCommandForeground#4A9B8E
- checkbox.background#20292B
- checkbox.border#59767A
- checkbox.foreground#8A8F93
- dropdown.background#3A5A5F
- dropdown.border#59767A
- dropdown.listBackground#0A1D26
- editor.background#304B4F
- editor.findMatchBackground#4A9B8E
- editor.findMatchBorder#59767A
- editor.findMatchHighlightBackground#0A1D26
- editor.findMatchHighlightBorder#4A9B8E
- editor.findRangeHighlightBackground#20292B
- editor.foreground#8A8F93
- editor.lineHighlightBackground#3A5A5F
- editor.lineHighlightBorder#3A5A5F
- editor.selectionBackground#243A3E
- editorGroup.border#20292B
- editorGroupHeader.border#20292B
- editorGroupHeader.tabsBackground#304B4F
- editorGroupHeader.tabsBorder#20292B
- editorHoverWidget.background#304B4F
- editorHoverWidget.border#59767A
- editorLineNumber.activeForeground#8A8F93
- editorLineNumber.foreground#66898F
- editorSuggestWidget.background#3A5A5F
- editorSuggestWidget.border#59767A
- editorWidget.background#20292B
- editorWidget.border#59767A
- editorWidget.foreground#8A8F93
- editorWidget.resizeBorder#59767A
- errorForeground#FE9F9B
- extensionButton.prominentBackground#20292B
- extensionButton.prominentForeground#8A8F93
- extensionButton.prominentHoverBackground#0A1D26
- focusBorder#59767A
- foreground#8A8F93
- icon.foreground#8A8F93
- inlineChat.background#20292B
- inlineChat.border#4A6B70
- inlineChat.foreground#4A9B8E
- inlineChatInput.background#0A1D26
- inlineChatInput.border#4A6B70
- inlineChatInput.focusBorder#4A9B8E
- inlineChatInput.foreground#4A9B8E
- inlineChatInput.placeholderForeground#59767A
- input.background#3A5A5F
- input.border#59767A
- input.foreground#8A8F93
- inputOption.activeBorder#59767A
- interactive.activeCodeBorder#4A9B8E
- interactive.inactiveCodeBorder#4A6B70
- list.activeSelectionBackground#4A6B70
- list.activeSelectionForeground#FFF
- list.focusForeground#FFF
- list.focusOutline#59767A
- list.hoverBackground#2A4B51
- list.hoverForeground#FFF
- list.inactiveSelectionBackground#3A5A5F
- menu.background#304B4F
- menubar.selectionBackground#304B4F
- notification.background#304B4F
- notification.border#59767A
- notification.buttonBackground#20292B
- notification.buttonBorder#59767A
- notification.buttonForeground#8A8F93
- notification.errorBackground#304B4F
- notification.errorForeground#FE9F9B
- notification.foreground#8A8F93
- notification.infoBackground#304B4F
- notification.infoForeground#A4DFFD
- notification.warningBackground#304B4F
- notification.warningForeground#FE9F9B
- panel.background#304B4F
- panel.border#20292B
- panelTitle.activeBorder#304B4F
- panelTitle.inactiveForeground#8A8F93
- pickerGroup.border#59767A
- pickerGroup.foreground#4A9B8E
- progressBar.background#4A9B8E
- quickInput.background#3A5A5F
- quickInput.foreground#8A8F93
- quickInputList.focusBackground#4A6B70
- quickInputList.focusForeground#D7D7DB
- quickInputTitle.background#20292B
- scrollbar.shadow#151D1E
- scrollbarSlider.activeBackground#6A8B90
- scrollbarSlider.background#4A6B70
- scrollbarSlider.hoverBackground#5A7B80
- searchEditor.findMatchBackground#4A9B8E
- searchEditor.findMatchBorder#59767A
- searchEditor.textInputBorder#59767A
- selection.background#3A5A5F
- sideBar.background#304B4F
- sideBar.border#20292B
- sideBar.foreground#8A8F93
- sideBarSectionHeader.background#304B4F
- statusBar.background#304B4F
- statusBar.border#20292B
- statusBar.debuggingBackground#304B4F
- statusBar.noFolderBackground#304B4F
- symbolIcon.colorForeground#8A8F93
- tab.activeBackground#304B4F
- tab.activeBorder#00000000
- tab.activeBorderTop#4A9B8E
- tab.border#00000000
- tab.hoverBackground#304B4F
- tab.hoverBorder#00000000
- tab.inactiveBackground#304B4F
- tab.unfocusedHoverBackground#304B4F
- tab.unfocusedHoverBorder#00000000
- terminal.background#304B4F
- titleBar.activeBackground#304B4F
- titleBar.inactiveBackground#304B4F
- tree.indentGuidesStroke#8A8F93
- 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 | — |