Shopify Theme

Name: Shopify Theme
Author: ecmasx

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.

GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Shopify Theme — Shopify Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

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

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id  
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}