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
:rootblock (dark) and a sibling:root[data-theme="light"]override. No component-level overrides exist — every surface that reads fromvar(--bg-base),var(--ink),var(--accent), etc. swaps automatically. - Anti-FOUC. A tiny inline script at the top of
<head>readslocalStorage('perspicuity-theme')and setsdata-themebefore the first paint. No dark-flash when you load a light page on a slow connection. - Three options.
dark,light, orauto— auto follows your OS preference viamatchMedia('(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.