FOUNDATIONS · LIGHT MODE

A light theme without losing the editorial calm

Warm paper, never clinical white. Dark cool slate for ink, not harsh black. The teal accent darkens for contrast. Every dark-mode token has a matched light-mode value — toggling theme is a single root-class swap.

● DARK

PrOACT · Step 4

The site expands scope significantly — all provinces plus federal.

P PERSPICUITY

That tension is real. Have you considered co-development as a framing?

+2 0 −1

🎙

☀ LIGHT

PrOACT · Step 4

The site expands scope significantly — all provinces plus federal.

P PERSPICUITY

That tension is real. Have you considered co-development as a framing?

+2 0 −1

🎙

HOW IT WORKS

CSS-variable swap. The base stylesheet defines a :root block (dark) and a sibling :root[data-theme="light"] override. No component-level overrides exist — every surface that reads from var(--bg-base), var(--ink), var(--accent), etc. swaps automatically.
Anti-FOUC. A tiny inline script at the top of <head> reads localStorage('perspicuity-theme') and sets data-theme before the first paint. No dark-flash when you load a light page on a slow connection.
Three options. dark, light, or auto — auto follows your OS preference via matchMedia('(prefers-color-scheme: light)') and flips live when you toggle the system theme.
Cross-device. Your choice persists per-account on member.theme; the localStorage cache is just the first-paint accelerator on each device.

Pick your theme in the user menu in the top-right. Click your avatar → choose Dark / Light / Match system.