Theme Clock
An analogue clock with a light/dark theme that persists.
StarterWeb appTool2–4hAI-buildable 5/5no setup
The clock face plus a theme toggle stored in localStorage so it survives reload. A compact study in mapping values to rotation and doing theming with CSS custom properties.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 4
- Analogue clock face with hour, minute, and second hands
- Hand rotation derives from a value-to-degrees mapping
- A toggle switches between light and dark
- The theme choice persists across reloads
The interesting part
- Applying the stored theme before first paint to avoid a flash
Once it works
- Respect the system colour scheme by default
- Add a seconds-hand smooth sweep
Suggested stack
reacttypescripttailwindcanvas-apilocalstorage