Add dark mode support with system preference detection#9
Conversation
- Add useTheme hook with localStorage persistence and OS preference fallback - Add Sun/Moon toggle button to the app header - Add FOMT prevention inline script to index.html - Fix Calendar icon brightness in dark mode (blue-600 → blue-400) - Fix missing dark variant on date section wrapper https://claude.ai/code/session_01MRpbiF23XV7QXSSH73zoZa
Greptile SummaryThis PR adds dark mode support to PedalNotes with system preference detection, localStorage persistence, and FOUC prevention. The implementation is well-structured: a render-blocking inline script in Key changes:
Confidence Score: 5/5Safe to merge — all findings are non-blocking style suggestions. The prior P1 concern (missing try/catch around browser APIs) has been fully addressed. The only remaining finding is a P2 style suggestion (raw button vs. shadcn/ui Button), which does not affect correctness or reliability. No files require special attention. Important Files Changed
Sequence DiagramsequenceDiagram
participant Browser
participant InlineScript as "index.html script"
participant useTheme as "useTheme hook"
participant DOM as "document.documentElement"
participant LS as "localStorage"
Browser->>InlineScript: "Parse head (blocking)"
InlineScript->>LS: "getItem(theme)"
LS-->>InlineScript: "stored value / null"
alt "stored === dark"
InlineScript->>DOM: "classList.add(dark)"
else "no stored + prefers-color-scheme: dark"
InlineScript->>DOM: "classList.add(dark)"
end
Browser->>useTheme: "React mounts, lazy initialiser runs"
useTheme->>LS: "getItem(theme)"
LS-->>useTheme: "stored value"
useTheme->>DOM: "classList.add/remove(dark)"
useTheme->>LS: "setItem(theme, value)"
note over useTheme,DOM: "On toggle click"
useTheme->>useTheme: "setTheme toggle"
useTheme->>DOM: "classList.add/remove(dark)"
useTheme->>LS: "setItem(theme, newTheme)"
Reviews (2): Last reviewed commit: "Wrap localStorage calls in try/catch in ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Prevents unhandled render errors in environments where localStorage is restricted (Safari private mode, sandboxed iframes, storage-blocked extensions). https://claude.ai/code/session_01MRpbiF23XV7QXSSH73zoZa
|
Done. The review was spot-on — the index.html FOMT script already had the try/catch, but the hook didn't. Fixed both spots: |
2 participants
https://claude.ai/code/session_01MRpbiF23XV7QXSSH73zoZa