Dark mode from system settings breaks the schedule picker and theme toggle #45

New issue

Open

opened 2026-10-03 19:44:39 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:39 +00:00

Member

What's wrong
With no saved theme and the OS in dark mode, the site renders dark, but components that check theme === 'dark' treat it as light. The schedule picker is white text on white, the Explore Tags box is white, the toggle shows a moon while the page is already dark, and the first click on the toggle does nothing.

How to reproduce

Set your OS to dark mode.
In DevTools > Application > Local Storage, delete the theme key (or use a private window), then sign in.
Look at the schedule picker in the navbar and open its menu.
Open /explore and look at the Tags box.
Click the theme toggle once: nothing changes. Click again: the page goes light.

Expected
Every control matches the theme on screen. The toggle shows the icon for the current look, and one click switches it.

Where to look

next-themes reports theme: "system" here; resolvedTheme is the actual "dark" or "light". Use resolvedTheme for styling and for the toggle.
web/src/app/components/Navbar.tsx: sx and MenuProps on both schedule Select copies (desktop and mobile), plus the toggle's onClick and icon.
web/src/app/components/SearchResultSidebar.tsx: the react-select styles.
web/src/app/components/SignedOutNav.tsx: the same toggle logic on the signed-out page.

Done when

grep -rn "theme ===" web/src finds nothing.
With the OS dark and no saved theme: picker, picker menu and Tags are readable, the toggle shows a sun, and one click switches to light.
Explicit light and explicit dark still look right.

**What's wrong** With no saved theme and the OS in dark mode, the site renders dark, but components that check `theme === 'dark'` treat it as light. The schedule picker is white text on white, the Explore Tags box is white, the toggle shows a moon while the page is already dark, and the first click on the toggle does nothing. **How to reproduce** 1. Set your OS to dark mode. 2. In DevTools > Application > Local Storage, delete the `theme` key (or use a private window), then sign in. 3. Look at the schedule picker in the navbar and open its menu. 4. Open /explore and look at the Tags box. 5. Click the theme toggle once: nothing changes. Click again: the page goes light. **Expected** Every control matches the theme on screen. The toggle shows the icon for the current look, and one click switches it. **Where to look** - next-themes reports `theme: "system"` here; `resolvedTheme` is the actual "dark" or "light". Use `resolvedTheme` for styling and for the toggle. - `web/src/app/components/Navbar.tsx`: `sx` and `MenuProps` on both schedule `Select` copies (desktop and mobile), plus the toggle's `onClick` and icon. - `web/src/app/components/SearchResultSidebar.tsx`: the react-select `styles`. - `web/src/app/components/SignedOutNav.tsx`: the same toggle logic on the signed-out page. **Done when** - [ ] `grep -rn "theme ===" web/src` finds nothing. - [ ] With the OS dark and no saved theme: picker, picker menu and Tags are readable, the toggle shows a sun, and one click switches to light. - [ ] Explicit light and explicit dark still look right.

jalenluorion added this to the Phase 1 milestone

2026-10-03 19:44:39 +00:00

jalenluorion added the

frontend

good first issue

bug

labels

2026-10-03 19:44:39 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00