Context
The app is dark-first (<body class="app-dark"> in index.html). The toggle mechanism already works — removing .app-dark switches PrimeNG Aura to light mode via darkModeSelector: '.app-dark' in app.config.ts:38. What's missing is custom light theme CSS.
Goal
Implement a polished light theme and re-enable the Light option in settings. Optionally implement System (OS preference detection).
What's needed
- Custom CSS variables for light mode in
styles.scss (:root scope, mirroring .app-dark overrides)
- Review all app-specific styling for dark-mode assumptions (hardcoded colors, contrast issues)
- Optionally: System theme via
window.matchMedia('(prefers-color-scheme: dark)') with listener for OS changes
- Re-enable Light (and optionally System) in the theme dropdown
Reference
- Dark theme variables:
frontend/src/styles.scss:16-36
- PrimeNG Aura config:
frontend/src/app/app.config.ts:33-42
- Theme apply logic:
frontend/src/app/layout/shell.component.ts:157-161
Acceptance Criteria
Context
The app is dark-first (
<body class="app-dark">inindex.html). The toggle mechanism already works — removing.app-darkswitches PrimeNG Aura to light mode viadarkModeSelector: '.app-dark'inapp.config.ts:38. What's missing is custom light theme CSS.Goal
Implement a polished light theme and re-enable the Light option in settings. Optionally implement System (OS preference detection).
What's needed
styles.scss(:rootscope, mirroring.app-darkoverrides)window.matchMedia('(prefers-color-scheme: dark)')with listener for OS changesReference
frontend/src/styles.scss:16-36frontend/src/app/app.config.ts:33-42frontend/src/app/layout/shell.component.ts:157-161Acceptance Criteria