Add dark/light theme toggle #13
Description
Summary
Many developers prefer a dark theme for monitoring dashboards, especially those who check alerts at night or work in low-light environments. Adding a dark/light theme toggle would improve the user experience and make CronPulse feel more polished.
Problem
CronPulse currently has a fixed color scheme. Users have no way to switch between dark and light themes, which can cause eye strain in certain lighting conditions and doesn't match their OS/browser preference.
Expected Behavior / Deliverable
- A theme toggle button (e.g., sun/moon icon) in the dashboard header/navbar.
- Three modes: Light, Dark, and System (follows
prefers-color-scheme). - Theme preference persisted in
localStorageso it survives page reloads. - All dashboard pages, status pages, and settings pages properly styled in both themes.
- Smooth transition between themes (no jarring flash).
Implementation Hints
- UI components live in:
src/— look at the existing layout/header components. - If the project uses Tailwind CSS, dark mode can be enabled via the
dark:variant withclassstrategy intailwind.config. - Common pattern:
- Add
class="dark"to<html>element based on preference. - Use CSS variables or Tailwind
dark:utilities for color switching. - Store preference in
localStorageand read it on page load (before render to prevent flash).
- Add
- Consider using
window.matchMedia('(prefers-color-scheme: dark)')for the "System" option.
Acceptance Criteria
- Theme toggle button visible in the dashboard navbar
- Light, Dark, and System (auto-detect) modes
- Preference persisted in
localStorage - All pages render correctly in both themes
- No flash of wrong theme on page load (FOUC prevention)
- Public status pages also respect the theme