stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

Dark mode: Light/Dark/System setting with token-based dark palette #180

New Issue
Closed
opened 2026-07-28 20:35:57 +02:00 by fable-5 · 1 comment
fable-5 commented 2026-07-28 20:35:57 +02:00
Collaborator
Copy Link

The SPA is light-only today; only the no-JS public shell has a minimal dark block (#167). Add a real dark mode as the first stage of the theming roadmap (accent theming and pond accents follow as separate issues).

Scope

  • Dark palette as a second token set in tokens.css via :root[data-theme='dark']; JS always resolves to a concrete data-theme (light/dark), so the selector contract stays simple for later theming stages. color-scheme per theme so scrollbars and native controls follow.
  • Three-way user setting Light / Dark / System, stored device-locally (ui.theme.mode in localStorage, like the single-key-shortcut toggle from #170). New Appearance section on the settings page (fieldset with native radios, de+en).
  • Flash-of-white prevention: external public/theme-init.js loaded in <head> before the bundle (CSP script-src 'self' forbids inline scripts), plus color-scheme meta and paired theme-color metas in index.html.
  • Migrate the ~10 remaining hardcoded colors in base.css to new tokens first (badges, danger hover, notification badge, overdue date) - light rendering stays pixel-identical.
  • Contrast per ADR 0017 (text >= 4.5:1, UI >= 3:1) for the whole dark palette, mechanically asserted by a unit test that parses tokens.css.
  • ADR 0018 documenting the theming model (broad: modes now, accent/pond theming later).

Acceptance criteria

  • Settings offer Light/Dark/System; the choice applies instantly, persists across reloads, System follows OS changes live.
  • No white flash on load when dark is active (also offline/PWA).
  • a11y e2e pack runs its scans in light AND dark with zero axe violations.
  • Token contrast unit test covers both palettes.
  • pnpm typecheck, lint, i18n:check green.
The SPA is light-only today; only the no-JS public shell has a minimal dark block (#167). Add a real dark mode as the first stage of the theming roadmap (accent theming and pond accents follow as separate issues). ## Scope - Dark palette as a second token set in `tokens.css` via `:root[data-theme='dark']`; JS always resolves to a concrete `data-theme` (`light`/`dark`), so the selector contract stays simple for later theming stages. `color-scheme` per theme so scrollbars and native controls follow. - Three-way user setting Light / Dark / System, stored device-locally (`ui.theme.mode` in localStorage, like the single-key-shortcut toggle from #170). New Appearance section on the settings page (fieldset with native radios, de+en). - Flash-of-white prevention: external `public/theme-init.js` loaded in `<head>` before the bundle (CSP `script-src 'self'` forbids inline scripts), plus `color-scheme` meta and paired `theme-color` metas in `index.html`. - Migrate the ~10 remaining hardcoded colors in `base.css` to new tokens first (badges, danger hover, notification badge, overdue date) - light rendering stays pixel-identical. - Contrast per ADR 0017 (text >= 4.5:1, UI >= 3:1) for the whole dark palette, mechanically asserted by a unit test that parses `tokens.css`. - ADR 0018 documenting the theming model (broad: modes now, accent/pond theming later). ## Acceptance criteria - Settings offer Light/Dark/System; the choice applies instantly, persists across reloads, System follows OS changes live. - No white flash on load when dark is active (also offline/PWA). - a11y e2e pack runs its scans in light AND dark with zero axe violations. - Token contrast unit test covers both palettes. - `pnpm typecheck`, lint, `i18n:check` green.
fable-5 commented 2026-07-29 08:01:43 +02:00
Author
Collaborator
Copy Link

Shipped with PR #181 (merged fast-forward, main=77df813). CI run 454 green (453 caught the settings-nav section-count fence, fixed). CD run 455 green; verified live on Test and Int: readyz 5/5 ok, theme-init.js served (200), dark token block present in the shipped CSS bundle (index-B3JdpRej.css). ADR 0018 documents the theming model; accent/pond stages follow as separate issues.

Shipped with PR #181 (merged fast-forward, main=77df813). CI run 454 green (453 caught the settings-nav section-count fence, fixed). CD run 455 green; verified live on Test and Int: readyz 5/5 ok, theme-init.js served (200), dark token block present in the shipped CSS bundle (index-B3JdpRej.css). ADR 0018 documents the theming model; accent/pond stages follow as separate issues.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels   
area:auth

   
area:docs

   
area:export

   
area:ops

   
area:storage

   
area:supply-chain

   
auth

Authentication, permissions, quotas

  
backend

API server (apps/api)

  
blocked

Blocked on external dependency/infrastructure

  
collab

Collaboration server (apps/collab)

  
deployment

Docker, CI/CD, hosting

  
docs

Documentation

  
effort:L

   
effort:M

   
effort:S

   
frontend

SPA (apps/web)

  
plugins

Plugin system and SDK

  
qa

Tests, fixtures, e2e

  
vs-nfd

   
vs-nfd:blocker
No Label
area:auth
area:docs
area:export
area:ops
area:storage
area:supply-chain
auth
backend
blocked
collab
deployment
docs
effort:L
effort:M
effort:S
frontend
plugins
qa
vs-nfd
vs-nfd:blocker
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: stwaidele/dorfteich#180
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?