How OpenChronology was built

#383 · Light and dark themes across the site, the editor and the timeline

2026-10-30T04:30:46Z CE

• timeline-app
• pull request

Fixes #382 Light and dark across the website, the editor (hosted, offline file, desktop app) and the timeline stage, from the landing page's dark palette (#379). **Tokens.** `src/theme.css` holds every color once, as `light-dark(light, dark)`, and both `src/styles.css` and `platform/app/platform.css` import it; the hard-coded colors in both stylesheets, the tick notches' JS-computed color and the marker shapes' SVG fill and stroke now use tokens. Browsers without `light-dark()` get the light values alone (a unit test keeps that fallback in step). Print is always light. **Choice.** System / Light / Dark in the site's footer (signed out too), the account menu and the editor's header (offline file, desktop app, plain editor). It is kept in localStorage (try/catch) and set as ` ` by a tiny inline script in the head, before the first paint: by the per-request nonce on the site's pages, by its SHA-256 in the editor's CSP (frame and embeds), the offline file's CSP and the desktop app's `tauri.conf.json`. Without JavaScript the system's setting applies. The framed editor and other tabs follow a change through the storage event. **Embeds** follow the visitor's system, never the stored choice, and take `?theme=light|dark` (docs/sharing.md). **Timeline theme.** The roles a theme sets keep their colors in both modes. A theme with a background color gives the stage the scheme that suits that color; a theme with other colors and no background keeps its light stage in dark, so its colors stay readable (docs/plugins.md). **Contrast.** `test/theme-contrast.test.mjs` checks the token pairs drawn together against WCAG AA in both modes (4.5:1 text, 3:1 controls and focus rings). A few light values darkened slightly to pass: muted, faint, focus ring, tick labels, soft label text, the time cursor and relationship arcs. **Tests.** Unit tests for the contrast and the choice's logic (boot script, stored choice, embeds, CSP hashes). `test/theme-browser.mjs` (editor dark, header choice, no flash, across tabs), the offline browser test (its choice under its hash-pinned CSP), and `test/theme-live-postgres.mjs` (new CI step): explore, a timeline in its editor, the reader, account, help, admin, plugins, sign-in, an embed and Not found in both schemes at phone and desktop width with an in-browser contrast scan; the footer and account menu choice persisting with the attribute present before ` `; embeds; print; no JavaScript; a themed timeline keeping its colors. Existing marker-shape and theme expectations updated for the token-drawn shapes and the dark-background defaults.

Open #383 · Light and dark themes across the site, the editor and the timeline in the timeline