Knowledge base

Theming

Light, dark, Nocturne, system, six accents, and why the choice never follows you between surfaces.

The theme

Four appearances - Light, Dark, Nocturne and System - on every surface: web dashboard, desktop windows, extension popup and board.

Nocturne is the default on all three, not System. A reader who has never touched the control gets the product's look; picking System hands the choice to the OS from then on and follows it live. This paragraph said "default system" until 2026-08-29 and that was never true of any surface (owner ruling 2026-08-17, DECISIONS.md, "A default is not a detail of a redesign").

It also said the web offered System, which it did not: the web toggle cycled Light → Dark → Nocturne and had no fourth position, while the desktop Settings window and the extension popup both had one. That is fixed rather than documented away - the web cycle has four positions now (packages/ui/src/components/theme-toggle.tsx).

The six accents

Blue, Indigo, Teal, Slate, Violet, Magenta (packages/ui/src/components/accent-picker.tsx:10-15).

On the web, the accent picker lives only in the dashboard header (apps/web/src/app/dashboard/layout.tsx:38). It stores its choice in localStorage under the key accent (accent-picker.tsx:21), applied per browser, not per account, and re-applied before first paint by an inline script in the root layout (apps/web/src/app/layout.tsx:32). It deliberately never touches the share viewer or the home page: a stranger's viewer should look the same for everyone. The accent token blocks are pinned by scripts/check-tokens.mjs, which checks mirror identity across the three CSS copies, block completeness, and the default accent (joined-to-code).

Desktop

Theme dark/light/system plus the same six accents, set in Settings; both apply on Save. Settings repaints itself at once, the board repaints when it next takes focus (apps/desktop/src/core.js), and any window opened later comes up with the new palette. The pill, the webcam bubble and the region overlay stay dark by ruling, whatever the theme: they float over other people's content and must stay legible there.

Extension

The popup owns Theme (Dark, Light, System) and the six accents; System follows the OS live. The board inherits both through a pre-paint hint (apps/extension/prepaint.js) plus the meta store, so it deliberately has no duplicate picker. The choice is per surface: the desktop app and the web app do not follow it, and it does not sync anywhere, because the extension never touches chrome.storage.sync (see extension.md).

The sentence a support agent can paste

"Theme and accent are chosen per app and per browser; they are stored locally, so setting them in one place does not change the others, and share links always look the same for everyone."