Julien Gautier
f6ba6cde2c
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.
Documentation index
This is the entry point to all project documentation. It is maintained automatically: any addition, rename, or removal of a .md file under docs/ must be reflected here in the same change.
Conventions
- Documentation is written in English.
- One topic per file. Group related files into a folder when there are three or more.
- Cross-reference with relative links so they keep working in GitHub, IDEs, and exported sites.
- For architectural decisions, do not add them here — they belong in decisions/ as MADR 4.0.0 ADRs.
Sections
Daily development
- development.md — repo layout, prerequisites, initial setup, daily commands, observability dev-loop (Jaeger UI, log ↔ trace correlation), dependency updates (Renovate), conventional commit cycle. Day-to-day reference for working on the project.
Architecture
- architecture.md — cross-cutting Mermaid diagrams: C4 system context, C4 containers, Nx module boundaries, CI/CD pipeline. Single-decision diagrams (auth sequence, ERD, etc.) live inline in their ADR.
Onboarding & environment
Setup guides for new contributors:
- setup/01-wsl-terminal-setup.md — modern WSL terminal (Zsh + Powerlevel10k + CLI tools)
- setup/02-dev-web-stack.md — Node via nvm, pnpm via corepack, Docker
- setup/03-angular-nx-monorepo.md — Angular + Nx monorepo bootstrap
Operations & runbooks
Empty — to be populated when we deploy.
Security, performance, accessibility
Empty — placeholders to be filled with rationale docs alongside their corresponding ADRs.