skills.rest
tomtoto757
tomtoto757COMMUNITY
Explore all skills by this author →
GitHub

storefront-theming

Implement design token theming with CSS custom properties for multi-brand storefronts and dark mode.

3|1|Updated Mar 21, 2026
Search Tags:#design tokens#dark mode#white-label#Style Dictionary#multi-brand#css custom properties#storefront theming
One-click install
npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill storefront-theming-tomtoto757
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storefront-theming
Source: https://github.com/tomtoto757/ecomm-ai-team/tree/main/skills/storefront-shopping-experience/finsilabs/storefront-ui/storefront-theming
Command: npx skills add https://github.com/tomtoto757/ecomm-ai-team --skill storefront-theming-tomtoto757

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires style-dictionary.

What problem does it solve? Rebranding a storefront or supporting multiple brands from one codebase usually means hunting down hard-coded colors across thousands of component files. This Skill provides a design token architecture using CSS custom properties so themes, dark mode, and white-label tenant overrides can be applied without touching component code. ## Core Features & Use Cases - Platform-Specific Theming Setup: Step-by-step configuration for Shopify (Theme Editor color schemes), WooCommerce (theme.json Global Styles), BigCommerce (Cornerstone SCSS variables), and custom/headless builds (Style Dictionary three-tier tokens). - Dark Mode Implementation: Runtime theme switching with data-theme attributes, localStorage persistence, system preference detection, and a synchronous head script that prevents flash of unstyled content. - White-Label Multi-Tenant Injection: Server-side injection of per-tenant CSS variable overrides with sanitization that only allows hex colors, lengths, and font names to prevent CSS injection attacks. - Use Case: A SaaS platform hosting hundreds of merchant storefronts injects each merchant's brand colors server-side as an inline style tag, eliminating the unbranded flash that a client-side useEffect approach caused. ## Quick Start Set up a three-tier design token system with dark mode and white-label support for my storefront on my platform.

Frequently Asked Questions about storefront-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement dark mode for a storefront without a flash of unstyled content?▼

Apply the data-theme attribute synchronously in an inline script in the document head before stylesheets load, reading the preference from localStorage. Combine this with a prefers-color-scheme media query guarded by :root:not([data-theme="light"]) so explicit light choices are respected.

How to build a multi-brand design token system with CSS custom properties?▼

Structure tokens in three tiers: global raw values, semantic meaning-based aliases like --color-brand-primary, and component styles that consume only semantic tokens. For custom builds, compile JSON tokens with Style Dictionary into CSS variables and JavaScript exports.

Does Shopify support design tokens and theme customization without code?▼

Yes, Shopify OS2.0 themes expose brand colors, fonts, and border radii through the Theme Editor's Color scheme system, which writes to CSS variables automatically. Developers can extend this by adding custom variables in assets/base.css that reference theme settings.

How do I safely inject tenant theme overrides into HTML?▼

Inject tenant CSS as an inline style tag server-side scoped to :root, never in a client-side useEffect which causes a flash. Sanitize values to allow only hex colors, rem/px lengths, and font names, rejecting url(), expression(), and arbitrary strings to prevent CSS injection.

Why should semantic token names be meaning-based instead of color-based?▼

Semantic names like --color-brand-primary survive rebrands because the hex value changes but the meaning stays. Naming tokens after their current value like --color-blue-600 forces find-and-replace across component files whenever the palette changes.

Related Skills

Explore More Software Engineering Skills→
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate
nazlicancaglarnazlicancaglar

visual-design-system

Translate brand visual identity into tokenized CSS custom properties and design tokens.

Community
Advanced
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
ihatesea69ihatesea69
3

wp-block-themes

Manage theme.json configurations and debug WordPress block themes.

Community
Intermediate