fix: prevent ThemeToggle hydration mismatch by deferring icon render
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m32s

Server doesn't know localStorage theme, so defer emoji rendering until
after mount to avoid server/client text mismatch.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-26 11:16:31 +01:00
parent 9298eef0cb
commit 7c68fb81e3

View File

@@ -1,9 +1,15 @@
'use client';
import { useTheme } from '@/contexts/ThemeContext';
import { useState, useEffect } from 'react';
export function ThemeToggle() {
const { theme, toggleTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<button
@@ -11,7 +17,7 @@ export function ThemeToggle() {
className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-lg transition-colors hover:bg-card-hover"
aria-label="Toggle theme"
>
{theme === 'light' ? '🌙' : '☀️'}
{mounted ? (theme === 'light' ? '🌙' : '☀️') : <span className="h-5 w-5" />}
</button>
);
}