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#0F1B2E
- activityBar.border#283551
- activityBarBadge.background#9DB8F7
- activityBarBadge.foreground#FFF
- badge.background#5870A4
- badge.foreground#FFF
- breadcrumb.activeSelectionForeground#DDE2F1
- breadcrumb.background#0F1B2E
- breadcrumb.focusForeground#DDE2F1
- breadcrumb.foreground#A4DFFD
- button.background#1A273F
- button.border#5870A4
- button.foreground#95A7D5
- button.hoverBackground#283551
- button.secondaryBackground#283551
- button.secondaryForeground#95A7D5
- button.secondaryHoverBackground#1A273F
- checkbox.background#1A273F
- checkbox.border#5870A4
- checkbox.foreground#95A7D5
- dropdown.background#0B101F
- dropdown.border#5870A4
- dropdown.listBackground#283551
- editor.background#0F1B2E
- editor.findMatchBackground#5870A4
- editor.findMatchBorder#9DB8F7
- editor.findMatchHighlightBackground#283551
- editor.findMatchHighlightBorder#5870A4
- editor.findRangeHighlightBackground#1A273F
- editor.foreground#A4DFFD
- editor.lineHighlightBackground#283551
- editor.lineHighlightBorder#283551
- editor.selectionBackground#1A2C45
- editorGroup.border#283551
- editorGroupHeader.border#1A273F
- editorGroupHeader.tabsBackground#0F1B2E
- editorGroupHeader.tabsBorder#1A273F
- editorHoverWidget.background#0F1B2E
- editorHoverWidget.border#5870A4
- editorLineNumber.activeForeground#95A7D5
- editorLineNumber.foreground#475B86
- editorSuggestWidget.background#2D3748
- editorSuggestWidget.border#5870A4
- editorWidget.background#1A273F
- editorWidget.border#5870A4
- editorWidget.foreground#95A7D5
- editorWidget.resizeBorder#5870A4
- errorForeground#FE9F9B
- extensionButton.prominentBackground#1A273F
- extensionButton.prominentForeground#95A7D5
- extensionButton.prominentHoverBackground#283551
- focusBorder#5870A4
- foreground#A4DFFD
- icon.foreground#95A7D5
- input.background#1A273F
- input.border#5870A4
- input.foreground#95A7D5
- inputOption.activeBorder#5870A4
- list.activeSelectionBackground#283551
- list.activeSelectionForeground#FFF
- list.focusForeground#FFF
- list.focusOutline#5870A4
- list.hoverBackground#283551
- list.hoverForeground#FFF
- list.inactiveSelectionBackground#283551
- menu.background#0F1B2E
- menubar.selectionBackground#0F1B2E
- notification.background#0F1B2E
- notification.border#5870A4
- notification.buttonBackground#1A273F
- notification.buttonBorder#5870A4
- notification.buttonForeground#95A7D5
- notification.errorBackground#0F1B2E
- notification.errorForeground#FE9F9B
- notification.foreground#95A7D5
- notification.infoBackground#0F1B2E
- notification.infoForeground#9DB8F7
- notification.warningBackground#0F1B2E
- notification.warningForeground#F3F972
- panel.background#0F1B2E
- panel.border#283551
- panelTitle.activeBorder#0F1B2E
- panelTitle.inactiveForeground#95A7D5
- pickerGroup.border#5870A4
- pickerGroup.foreground#9DB8F7
- progressBar.background#9DB8F7
- quickInput.background#0B101F
- quickInput.foreground#95A7D5
- quickInputList.focusBackground#283551
- quickInputList.focusForeground#FFF
- quickInputTitle.background#0B101F
- scrollbar.shadow#0B101F
- scrollbarSlider.activeBackground#5870A4
- scrollbarSlider.background#1A273F
- scrollbarSlider.hoverBackground#303F5F
- searchEditor.findMatchBackground#5870A4
- searchEditor.findMatchBorder#9DB8F7
- searchEditor.textInputBorder#5870A4
- selection.background#284B73
- sideBar.background#0F1B2E
- sideBar.border#283551
- sideBar.foreground#95A7D5
- sideBarSectionHeader.background#0F1B2E
- statusBar.background#0F1B2E
- statusBar.border#283551
- statusBar.debuggingBackground#0F1B2E
- statusBar.noFolderBackground#0F1B2E
- symbolIcon.colorForeground#95A7D5
- tab.activeBackground#0F1B2E
- tab.activeBorder#00000000
- tab.activeBorderTop#9DB8F7
- tab.border#00000000
- tab.hoverBackground#0F1B2E
- tab.hoverBorder#00000000
- tab.inactiveBackground#0F1B2E
- tab.unfocusedHoverBackground#0F1B2E
- tab.unfocusedHoverBorder#00000000
- terminal.background#0F1B2E
- titleBar.activeBackground#0F1B2E
- titleBar.inactiveBackground#0F1B2E
- tree.indentGuidesStroke#95A7D5
- 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 | — |