Project: demo-blog-engine · Branch: feat/dark-mode · Mode: default · Model: claude-haiku-4-5
Summary
Added a dark-mode toggle using CSS custom properties and prefers-color-scheme. The toggle writes to localStorage so the choice persists across navigations.
Conversation
Turn 1 — User
Add a dark mode toggle. Should respect system preference by default but override on click.
Turn 1 — Assistant
Using data-theme on <html> and swapping CSS custom properties. The toggle button writes localStorage.setItem('theme', next), and a tiny inline script in <head> reads it before first paint to avoid a flash.
Tools used in this turn:
- Edit: public/style.css — added [data-theme="dark"] vars
- Write: templates/theme-init.html (5-line preview)
- Edit: templates/base.html — included the init snippet
Connections
- [[demo-blog-engine]] — project
- [[DarkMode]] — concept
- [[CSSCustomProperties]] — concept