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 is checking this pull request.
Two major findings make this risky to merge as-is. The Code-review findings digest
Visual recap🖼️ A visual recap of the change is on the code review.
|
![haunt-sh[bot]](https://avatars.githubusercontent.com/in/4023735?s=60&v=4){kind=small}
| </script> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <style> | ||
| body { |
There was a problem hiding this comment.
🟠 tailwind = { config: ... } assigns to an undeclared global, so tailwind.config is never read by the CDN script.
major · correctness
| 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
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.