This is originally Temporal Theme but I personally call this one Dynamic Daylight Theme. Most sites hand you a switch or a toggle between two options: dark and light. I wanted a theme that behaves like weather, the way light actually moves through a day, from the practical dark and light mode we already know, into something dynamic, with warm and cool on top wherever you like them. Each part of the day gets its own light, warmth, and air. The idea grew out from Mindless(1), a small writing app I built for fun where I have a split theme for both color scheme and temperature.
The table below comes straight from the resolver. I render it on the server at fixed times, so you can inspect the full day in one glance instead of waiting for sunset.
Demo surface
10:02 · day
light · neutral · day
The room changes its light.
This window wears the phase theme. Nothing outside it is affected — the site theme stays exactly where it was.
Time source control panel
Temperature is your own adjustment on top of the clock. It never moves the time itself. Scrub to a new hour and everything follows again.
Phase boundaries
| Time | Phase | Scheme | Tone | Atmosphere |
|---|---|---|---|---|
| 00:00 | night | dark | cool | 0.10 |
| 05:29 | night | dark | cool | 0.10 |
| 05:30 | dawn | light | warm | 0.45 |
| 06:30 | morning | light | neutral | 0.20 |
| 09:00 | day | light | neutral | 0.05 |
| 12:00 | day | light | neutral | 0.05 |
| 16:00 | golden | light | warm | 0.50 |
| 17:30 | sunset | light | warm | 0.55 |
| 18:30 | dusk | dark | warm | 0.40 |
| 19:30 | evening | dark | neutral | 0.15 |
| 22:00 | night | dark | cool | 0.10 |
| 23:59 | night | dark | cool | 0.10 |
Schedule: 05:30 · 06:30 · 09:00 · 16:00 · 17:30 · 18:30 · 19:30 · 22:00. Tunable in lib/temporal-theme.ts.
Take it home
temporal-toggle.tsx · live
install · four steps
0 · Keep your switch
Stay on next-themes with a .dark class. Nothing here replaces that.
1 · Add tone
Copy the Styles tab into your CSS. Six scoped classes give you light and dark, each in warm, neutral, and cool.
2 · Add daylight
Copy the Resolver tab. One pure function maps the clock to a phase, a scheme, a temperature, and an atmosphere strength.
3 · Add control
Copy the Toggle tab. Wire it to either tier and let manual picks sit on top of the time as an offset.
Footnotes
- Mindless: my small writing app I made as a hobby. Its theme splits into color scheme and warm/cool temperature, and this lab extends that split into time.
- Chloe Yan's personal website: encountered this experiment few years back where I got the idea of a time-based color scheme.
If you enjoyed reading this or found it insightful, feel free to share it with others or send feedback. It helps me keep on researching and writing.
Say hiPublished on Sept. 29, 2026