Summary
The dark/light theme toggle exists but does not persist across sessions. Every page load resets to the default theme. Additionally, the system prefers-color-scheme setting is not respected on first load — users who prefer dark mode in their OS get a blinding white screen.
Problem
In frontend/src/theme.js, the theme is stored in component state only — it resets on reload.
Acceptance Criteria
References
frontend/src/theme.jsfrontend/index.html
Summary
The dark/light theme toggle exists but does not persist across sessions. Every page load resets to the default theme. Additionally, the system
prefers-color-schemesetting is not respected on first load — users who prefer dark mode in their OS get a blinding white screen.Problem
In
frontend/src/theme.js, the theme is stored in component state only — it resets on reload.Acceptance Criteria
localStorage.getItem('trivela:theme'); if absent, checkwindow.matchMedia('(prefers-color-scheme: dark)').matchesand use the OS preferencelocalStorageso next load respects the choicematchMedia.addEventListener('change', ...)) and auto-update if user has not manually set a preference<html>element (not<body>) to prevent FOUC (Flash of Unstyled Content) — move theme initialization toindex.html<script>in<head>References
frontend/src/theme.jsfrontend/index.html