abc/analysis_claude_code
1
0
Fork 0
mirror of https://github.com/shareAI-lab/analysis_claude_code.git synced 2026-05-06 16:26:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #83 from QuentinHsu/fix/web-theme-mount-sync

Browse Source 
fix(header): sync theme icon state after mount
This commit is contained in:
Xinlu Lai
2026-03-30 00:04:13 +08:00
committed by GitHub
parent 40f5a6ecc9 69f8abdbda
commit 21bc06153f
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/components/layout/header.tsx
View File

@@ -4,7 +4,7 @@ import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useTranslations, useLocale } from "@/lib/i18n"; import { useTranslations, useLocale } from "@/lib/i18n";
import { Github, Menu, X, Sun, Moon } from "lucide-react"; import { Github, Menu, X, Sun, Moon } from "lucide-react";
import { useState } from "react"; import { useState, useEffect } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
const NAV_ITEMS = [ const NAV_ITEMS = [
@@ -24,14 +24,13 @@ export function Header() {
const pathname = usePathname(); const pathname = usePathname();
const locale = useLocale(); const locale = useLocale();
const [mobileOpen, setMobileOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false);
const [dark, setDark] = useState(() => { const [dark, setDark] = useState(false);
if (typeof window !== "undefined") { const [mounted, setMounted] = useState(false);
const stored = localStorage.getItem("theme");
if (stored) return stored === "dark"; useEffect(() => {
return window.matchMedia("(prefers-color-scheme: dark)").matches; setMounted(true);
} setDark(document.documentElement.classList.contains("dark"));
return false; }, []);
});
function toggleDark() { function toggleDark() {
const next = !dark; const next = !dark;
@@ -91,7 +90,7 @@ export function Header() {
onClick={toggleDark} onClick={toggleDark}
className="rounded-md p-1.5 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white" className="rounded-md p-1.5 text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
> >
{dark ? <Sun size={16} /> : <Moon size={16} />} {mounted ? (dark ? <Sun size={16} /> : <Moon size={16} />) : <span className="w-4 h-4 inline-block" />}
</button> </button>
<a <a
@@ -148,7 +147,7 @@ export function Header() {
onClick={toggleDark} onClick={toggleDark}
className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white" className="flex min-h-[44px] min-w-[44px] items-center justify-center rounded-md text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-white"
> >
{dark ? <Sun size={18} /> : <Moon size={18} />} {mounted ? (dark ? <Sun size={18} /> : <Moon size={18} />) : <span className="w-[18px] h-[18px] inline-block" />}
</button> </button>
<a <a
href="https://github.com/shareAI-lab/learn-claude-code" href="https://github.com/shareAI-lab/learn-claude-code"