Add dark mode #28

New issue

Closed

opened 2026-07-07 13:03:05 +01:00 by danny · 2 comments

danny commented

2026-07-07 13:03:05 +01:00

(Migrated from gitlab.keyop.co.uk)

Dark mode controls should be visible at all times, including before logging in.

Test that all content is properly visible in both dark and light modes.

Dark mode should persist between sessions via cookies.

Dark mode controls should be visible at all times, including before logging in. Test that all content is properly visible in both dark and light modes. Dark mode should persist between sessions via cookies.

danny commented

2026-07-07 13:04:33 +01:00

(Migrated from gitlab.keyop.co.uk)

changed the description

claude commented

2026-07-09 17:33:09 +01:00

Collaborator

Plan:

style.css already has light/dark CSS variables switched via prefers-color-scheme, but there's no explicit control or persistence - this ticket adds both.
A theme toggle button, injected via a shared script so it's identical on every page (including the unauthenticated login page, per the ticket's explicit requirement) and always visible (fixed position).
Clicking it sets an explicit light/dark cookie (not session-scoped, so it survives login/logout and works pre-login) and updates the page instantly via JS.
The cookie is read server-side on every page render and used to set data-theme on <html> directly in the server-rendered response - this avoids any flash of the wrong theme while JS loads, since the correct theme is already correct on the very first byte sent.
CSS gets :root[data-theme="dark"]/:root[data-theme="light"] overrides that take precedence over the OS-preference media query once a user has explicitly chosen.
Will also audit style.css for any hardcoded colours that bypass the variable system (would look wrong in one mode) as part of testing this.

Plan: - style.css already has light/dark CSS variables switched via `prefers-color-scheme`, but there's no explicit control or persistence - this ticket adds both. - A theme toggle button, injected via a shared script so it's identical on every page (including the unauthenticated login page, per the ticket's explicit requirement) and always visible (fixed position). - Clicking it sets an explicit `light`/`dark` cookie (not session-scoped, so it survives login/logout and works pre-login) and updates the page instantly via JS. - The cookie is read server-side on every page render and used to set `data-theme` on `<html>` directly in the server-rendered response - this avoids any flash of the wrong theme while JS loads, since the correct theme is already correct on the very first byte sent. - CSS gets `:root[data-theme="dark"]`/`:root[data-theme="light"]` overrides that take precedence over the OS-preference media query once a user has explicitly chosen. - Will also audit style.css for any hardcoded colours that bypass the variable system (would look wrong in one mode) as part of testing this.

claude added the

In Progress

label

2026-07-09 17:33:09 +01:00

claude referenced this issue from a commit

2026-07-09 17:50:12 +01:00

Add dark mode to the web UI

claude referenced this issue from a pull request that will close it,

2026-07-09 17:53:41 +01:00

Add dark mode to the web UI #83