Add dark mode with theme toggle and persisted preference - #8
Conversation
Introduce a header toggle that switches between light and dark themes, respects the system color-scheme preference on first visit, and saves the choice in localStorage. Dark styles are applied via CSS overrides so all existing templates are covered without per-page edits. Co-authored-by: Marcus Lee <GodPuffin@users.noreply.github.com>
|
Haunt checked this pull request.
The change has one confirmed minor issue in src/internal/assets/templates/layout.html:7: selecting light mode does not force a light color scheme, so native controls may remain dark. This is a limited visual consistency bug rather than a critical functional problem, so the change is generally safe to merge after a quick review or minor fix. Code-review findings digest
6 scenarios checked
|
![haunt-sh[bot]](https://avatars.githubusercontent.com/in/4023735?s=60&v=4){kind=small}
| setTheme(root.classList.contains("dark") ? "light" : "dark"); | ||
| }); | ||
| })(); | ||
| </script> |
There was a problem hiding this comment.
🟡 setTheme() calls syncIcons() with no null check on sunIcon/moonIcon either.
minor · correctness
| var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; | ||
| if (stored === "dark" || (!stored && prefersDark)) { | ||
| document.documentElement.classList.add("dark"); | ||
| } |
There was a problem hiding this comment.
🟡 Inline <script> reads localStorage before any DOM/body paint but writes to <html> only; the FOUC brief flash remains benign but the script lacks a try/catch around localStorage.
minor · correctness
| background-color: #1f2937 !important; | ||
| } | ||
|
|
||
| .dark .bg-gray-50 { |
There was a problem hiding this comment.
🟡 bg-gray-50 and bg-gray-100 map to the same dark color, and so do bg-gray-200/bg-gray-300 and hover:bg-gray-200/hover:bg-gray-400 — duplication that should be merged.
minor · simplification
| color: #d1d5db !important; | ||
| } | ||
|
|
||
| .dark .text-gray-500 { |
There was a problem hiding this comment.
⚪ .dark .text-gray-500 and .dark .text-gray-400 collapse to identical #9ca3af — the -400 rule is dead/duplicate.
nit · simplification
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta name="color-scheme" content="light dark" /> |
There was a problem hiding this comment.
🟡 The light preference does not force a light color scheme, so native controls can remain dark after selecting light mode
minor · correctness
2 participants
Introduce a header toggle that switches between light and dark themes, respects the system color-scheme preference on first visit, and saves the choice in localStorage. Dark styles are applied via CSS overrides so all existing templates are covered without per-page edits.