Skip to content

feat: add dark/light theme switcher#20

Merged
nadimtuhin merged 1 commit into
mainfrom
feat/theme-switcher-issue-6
Jun 27, 2026
Merged

feat: add dark/light theme switcher#20
nadimtuhin merged 1 commit into
mainfrom
feat/theme-switcher-issue-6

Conversation

@nadimtuhin

Copy link
Copy Markdown
Owner

Closes #6

Adds dark/light theme toggle:

  • useTheme hook persists preference in localStorage
  • Falls back to system prefers-color-scheme on first visit
  • Moon/Sun button in sidebar header
  • Enables Tailwind darkMode: 'class' in tailwind.config.js

Closes #6

- Adds useTheme hook with localStorage persistence and system preference fallback
- Adds Moon/Sun toggle button in sidebar header
- Enables Tailwind darkMode: 'class'
@vercel

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
devutils Ready Ready Preview, Comment Jun 27, 2026 12:04pm

@claude

claude Bot commented Jun 27, 2026

Copy link
Copy Markdown
Contributor

Claude encountered an error —— View job


I'll analyze this and get back to you.

Comment thread src/App.tsx
const [dark, setDark] = useState<boolean>(() => {
const saved = localStorage.getItem("theme");
if (saved) return saved === "dark";
return window.matchMedia("(prefers-color-scheme: dark)").matches;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@kilo-code-bot

kilo-code-bot Bot commented Jun 27, 2026

Copy link
Copy Markdown

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 1
WARNING 0
SUGGESTION 0
Issue Details (click to expand)

CRITICAL

File Line Issue
src/App.tsx 62 SSR compatibility issue - window is undefined on server side
Files Reviewed (2 files)
  • src/App.tsx - 1 issue
  • tailwind.config.js - No issues

Fix these issues in Kilo Cloud


Reviewed by laguna-m.1-20260312:free · Input: 213.3K · Output: 3.8K · Cached: 356.8K

@nadimtuhin nadimtuhin merged commit d3e5ec7 into main Jun 27, 2026
5 of 6 checks passed
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'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Introduce a theme switcher

1 participant