Theme with CSS variables

Define the palette once as CSS variables; re-theme from one place.

frontend-designSKILL.md · Color & Theme
Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Frontend Aesthetics GuidelinesSkill text
frontend-designSKILL.md
No design should be the same. Vary between light and dark themes, different fonts, different aesthetics.
Frontend Aesthetics GuidelinesSkill text

From frontend-design. Both cards quote it.

One accent, eight places

Pick an accent, then flip to dark.

Hardcoded hexBad
18 hex literalsaccent 8 / 8
TokensGood
--accentaccent 8 / 8
.dashboard {
  --accent: #4f46e5;
  --on-accent: #fff;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, var(--surface));
}
.dashboard[data-mode="dark"] {
  --bg: #15161a; --surface: #1e2025; --ink: #ececef; --muted: #9a9ea6;
}
.btn        { background: var(--accent); color: var(--on-accent); }
.badge      { background: var(--accent-soft); color: var(--accent); }
.bar.is-on  { background: var(--accent); }

dashboard.style.setProperty("--accent", picked);

Edit tokens, not components

Edit a token. Each mode is its own five values.

    Why it matters, pros and cons

    Why it matters

    A literal color is a copy, and copies drift; a token is one decision.

    Pros

    • Rebrand by editing one block
    • Dark mode is a second value set
    • Runtime theming with one setProperty

    Cons

    • Tokens do not check contrast; test each set
    • Too many tokens is its own drift
    • A typo'd name fails silently