Dark Mode

The entire design system switches between light and dark with one attribute on <html>. No component code changes, no per-page toggles.

Enable

<html data-theme="dark">

// Toggle in JS
document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.removeAttribute('data-theme'); // back to light

If you load the DS JavaScript bundle, use the Antumo.Theme API instead:

Antumo.Theme.set('dark');
Antumo.Theme.set('light');
Antumo.Theme.toggle();
Antumo.Theme.useSystemPreference(); // follow OS, persists to localStorage

The selected theme persists under the antumo-theme localStorage key.

How it works

Every semantic token resolves to a different hex per theme. Dark mode is handled by [data-theme="dark"] overriding the token values — not by component CSS.

component SCSS  →  semantic token  →  raw scale + dark override  →  compiled hex

For example, --antumo-bg-primary:

Token	Light	Dark
--antumo-bg-primary	#ffffff	#0c0e12
--antumo-text-primary	#181d27	#f7f7f7
--antumo-border-secondary	#e9eaeb	#22262f

Some scales are invariant — the same hex in both themes: blue, green, yellow, red, white, and the focus color #5b6ef2. Navy and gray shift.

Default is light

Without an explicit data-theme="dark", the theme is always light — regardless of OS setting. Opt into OS-following with Antumo.Theme.useSystemPreference().

Set it on <html>, not <body>

The [data-theme="dark"] selector targets the document root. Setting it on <body> won't cascade correctly.

Verified both themes

Every one of the 39 mapped components is verified in both light and dark — 774 hex comparisons, zero mismatches. Dark values come from the compiled CSS (the source of truth for dark mode), not guessed from Figma.