[Feature]: Add light/dark theme toggle #4
Description
Feature Description
Add a theme toggle so users can switch Reelo between light and dark mode. The choice should be remembered across visits.
Proposed Implementation
- Move the colours in style.css into CSS variables (e.g. --bg, --surface, --text, --accent, --border) on :root, with an override set under [data-theme="light"] or [data-theme="dark"], whichever is not the current look.
- Add a toggle button (sun/moon icon) in the header of index.html.
- In app.js, set data-theme on on click.
- Save the choice in localStorage, and default to prefers-color-scheme on the first visit.
- Apply the saved theme with a small inline script in to avoid a flash of the wrong theme.
- Update to match the active theme.
- Add an aria-label to the toggle and make it keyboard accessible.
Additional Context
No response
Checklist
- I confirm that I want to work on this feature.
- I have searched the existing issues for similar feature requests.
- I have read the
CONTRIBUTING.mdguidelines.
Activity