Add a header dropdown that lets users pick light, dark, or auto (follow
the OS) color schemes. The choice persists in localStorage and applies
across reloads. In `auto` mode, the service listens to the
`prefers-color-scheme` media query so the UI flips when the OS theme
changes without a page refresh.
Architecture:
- `LayoutStateService` grows a `themeMode` signal alongside the
existing `sidebarCollapsed`, plus an `effectiveTheme` computed that
resolves `auto` against the system preference. A side-effect toggles
the `.dark` class on `<html>` so every `dark:` Tailwind utility
flips at once.
- Tailwind v4 dark mode rewired to class-based via
`@custom-variant dark (&:where(.dark, .dark *));` in `styles.css`,
overriding the v4 default (media-query-driven).
- Theme switcher built on `@angular/cdk/menu` for accessible roving
focus, escape/click-outside dismissal, and `menuitemradio` semantics
on the three options. Trigger glyph reflects the SELECTED mode (sun
/ moon / monitor) so users can tell which mode they're in even when
auto resolves to the same scheme as a manual pick.
- Dark variants applied across the shell (header, sidebar, main bg)
and the existing two pages. No semantic-token refactor yet — that
belongs in a future ADR (`--color-surface-1`, ...).
Side-edits:
- Replace `apf-small.svg` (94 kB, a base64-PNG-wrapped-in-SVG) with
a 144x144 PNG optimised by sharp at compression level 9 (7.6 kB).
- Header logo `src` swapped to `apf-small.png`. The wide vector
`apf-portal.svg` stays in place for future surfaces that want the
horizontal lockup.
Julien Gautier