abc/analysis_claude_code
1
0
Fork 0
mirror of https://github.com/shareAI-lab/analysis_claude_code.git synced 2026-05-07 08:46:26 +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 { useTranslations, useLocale } from "@/lib/i18n";
import { Github, Menu, X, Sun, Moon } from "lucide-react";
import { useState } from "react";
import { useState, useEffect } from "react";
import { cn } from "@/lib/utils";
const NAV_ITEMS = [
@@ -24,14 +24,13 @@ export function Header() {
const pathname = usePathname();
const locale = useLocale();
const [mobileOpen, setMobileOpen] = useState(false);
const [dark, setDark] = useState(() => {
if (typeof window !== "undefined") {
const stored = localStorage.getItem("theme");
if (stored) return stored === "dark";
return window.matchMedia("(prefers-color-scheme: dark)").matches;
}
return false;
});
const [dark, setDark] = useState(false);
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
setDark(document.documentElement.classList.contains("dark"));
}, []);
function toggleDark() {
const next = !dark;
@@ -91,7 +90,7 @@ export function Header() {
onClick={toggleDark}
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>
<a
@@ -148,7 +147,7 @@ export function Header() {
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"
>
{dark ? <Sun size={18} /> : <Moon size={18} />}
{mounted ? (dark ? <Sun size={18} /> : <Moon size={18} />) : <span className="w-[18px] h-[18px] inline-block" />}
</button>
<a
href="https://github.com/shareAI-lab/learn-claude-code"