Multi-Theme Branding System with CSS Variables

Supporting Multiple Brand Themes

Some applications need more than light and dark. SaaS platforms often let each customer apply their own brand colors, and marketing sites may switch themes per campaign. CSS custom properties make this manageable.

Architecture

Define a neutral base theme in :root, then override with data attributes:

:root {
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --accent: #8b5cf6;
  --bg: #0a0a0b;
  --surface: #141415;
}

[data-theme="sunset"] {
  --primary: #f97316;
  --primary-hover: #ea580c;
  --accent: #ef4444;
  --bg: #1c1917;
  --surface: #292524;
}

[data-theme="ocean"] {
  --primary: #06b6d4;
  --primary-hover: #0891b2;
  --accent: #14b8a6;
  --bg: #0c1222;
  --surface: #172135;
}

Switching Themes in JavaScript

document.documentElement.setAttribute('data-theme', 'sunset');

Scoped Theming

Data attributes can be applied at any DOM level, enabling localized theme sections within a single page. A product card could carry data-theme="ocean" while the rest of the page uses the default.

Token Structure

Keep semantic tokens (--primary, --bg, --text) at the top level and reference them from components. Each theme only needs to override semantic tokens, not every component variable. This keeps the override surface small even with dozens of components.

Generating Themes Dynamically

The CSS Variable Generator can produce multiple theme blocks. Generate each brand's palette, export the variable blocks, and include them in your CSS bundle with the appropriate attribute selectors.