julien/apf_portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(portal-shell): light / dark / auto theme switcher
CI / commits (pull_request) Successful in 3m11s
Details
CI / scan (pull_request) Successful in 3m11s
Details
CI / check (pull_request) Successful in 3m27s
Details
CI / a11y (pull_request) Successful in 2m8s
Details
CI / perf (pull_request) Successful in 4m14s
Details

Browse Source 
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.
This commit is contained in:
Julien Gautier
2026-05-11 02:03:20 +02:00
parent b6aa17f6a0
commit f6ba6cde2c
20 changed files with 505 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -111,6 +111,7 @@
"webpack-cli": "^5.1.4"
},
"dependencies": {
"@angular/cdk": "~21.2.10",
"@angular/common": "~21.2.0",
"@angular/compiler": "~21.2.0",
"@angular/core": "~21.2.0",