Dark Mode Toggle

// app/layout.tsx: apply the stored theme before the first paint, so a dark
// visitor never sees a light flash. "theme" matches the toggle's default
// storageKey; change both together.
const themeScript =
  "(function(){try{var t=localStorage.getItem('theme');" +
  "if(t!=='light'&&t!=='dark')t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';" +
  "var r=document.documentElement;r.classList.remove(t==='dark'?'light':'dark');" +
  "r.classList.add(t);r.style.colorScheme=t}catch(e){}})()";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body>{children}</body>
    </html>
  );
}

// header.tsx
import { DarkModeToggle } from "@/components/wensity/dark-mode-toggle";

export function Header() {
  return <DarkModeToggle variant="eclipse" reveal="circle" />;
}