feat: add dark/light theme switcher#20
Merged
Merged
Conversation
Closes #6 - Adds useTheme hook with localStorage persistence and system preference fallback - Adds Moon/Sun toggle button in sidebar header - Enables Tailwind darkMode: 'class'
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Claude encountered an error —— View job I'll analyze this and get back to you. |
| const [dark, setDark] = useState<boolean>(() => { | ||
| const saved = localStorage.getItem("theme"); | ||
| if (saved) return saved === "dark"; | ||
| return window.matchMedia("(prefers-color-scheme: dark)").matches; |
There was a problem hiding this comment.
CRITICAL: SSR compatibility issue - window is undefined on server side
The window.matchMedia call will throw a ReferenceError during server-side rendering (SSR) or in any Node.js environment. The fallback for system preference detection needs a guard for window availability.
Suggested change
| return window.matchMedia("(prefers-color-scheme: dark)").matches; | |
| if (saved) return saved === "dark"; | |
| return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches; |
This check ensures the code gracefully handles environments where window doesn't exist.
Reply with @kilocode-bot fix it to have Kilo Code address this issue.
Code Review SummaryStatus: 1 Issue Found | Recommendation: Address before merge Overview
Issue Details (click to expand)CRITICAL
Files Reviewed (2 files)
Fix these issues in Kilo Cloud Reviewed by laguna-m.1-20260312:free · Input: 213.3K · Output: 3.8K · Cached: 356.8K |
nadimtuhin
added a commit
that referenced
this pull request
Jun 28, 2026
Closes #6 - Adds useTheme hook with localStorage persistence and system preference fallback - Adds Moon/Sun toggle button in sidebar header - Enables Tailwind darkMode: 'class'
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #6
Adds dark/light theme toggle:
useThemehook persists preference in localStorageprefers-color-schemeon first visitdarkMode: 'class'in tailwind.config.js