/api /r tokens.json GitHub

Wiki Dark Mode Toggle

Button that toggles data-theme='dark' on the <html> element and persists the choice in localStorage. Initialises from localStorage on load, then falls back to prefers-color-scheme.

Live previewrendered from recipe via {tokens} resolution
icon-only

Compact — icon only, sr-only label.

icon-and-label

Icon + visible text label.

ARIA notes

Toggle button uses aria-pressed (true/false, not 'mixed'). aria-label updates on toggle to describe the ACTION ('Switch to dark mode' when in light mode). Icon is aria-hidden. Init script must run before first paint to prevent flash — place in <head> as inline script.

The usage tab for this component is not yet authored. Creative Design Contributors — pick this up.

Recipe is at /api/components/wiki-dark-mode-toggle.json.