songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix logo hydration error

Browse Source
This commit is contained in:
javayhu 2025-04-13 14:26:21 +08:00
parent f92e685ca6
commit e879c88e87
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/layout/logo.tsx
View File

@ -4,12 +4,22 @@ import { websiteConfig } from '@/config/website';
import { cn } from '@/lib/utils';
import { useTheme } from 'next-themes';
import Image from 'next/image';
import { useEffect, useState } from 'react';
export function Logo({ className }: { className?: string }) {
const theme = useTheme();
const { theme } = useTheme();
const [mounted, setMounted] = useState(false);
const logoLight = websiteConfig.metadata.logoLight ?? '/logo.png';
const logoDark = websiteConfig.metadata.logoDark ?? logoLight;
const logo = theme.theme === 'dark' ? logoDark : logoLight;
// During server-side rendering and initial client render, always use logoLight
// This prevents hydration mismatch
const logo = mounted && theme === 'dark' ? logoDark : logoLight;
// Only show theme-dependent UI after hydration to prevent mismatch
useEffect(() => {
setMounted(true);
}, []);
return (
<Image