1. Examples
  2. Blog
  3. Token system
Engineering

Designing a dual-theme token system

AM
Ada Mathison
Jun 4, 2026 · 6 min read
The whole framework re-themes from one layer of variables.

Arx keeps light, dark and custom themes in sync at runtime by reading every colour from a single set of CSS custom properties. This post walks through the design.

Why tokens

Hard-coded colours don't scale across themes. By routing every component through --arx-* variables, a theme switch is a class change — no recompile, no flash when paired with a small inline script.

  • One source of truth per colour role.
  • Dark mode is a class on <html>.
  • Custom themes ship as a single override file.

The layers

Light tokens live on :root; dark overrides on .arx-dark. Components never see raw hex — only the variables.

:root { --arx-primary: #0d6efd; }
.arx-dark { --arx-primary: #00c8ff; }

.arx-btn-primary { background: var(--arx-primary); }
Design is not just what it looks like — it's how it works.

Gradients from tokens

Because gradients are composed from the accent variables, they track the active theme automatically — no separate dark-mode gradient definitions.

css tokens theming
← Examples