Files
CapaKraken/apps/web/src/components/layout/ThemeProvider.tsx
T

24 lines
735 B
TypeScript

"use client";
import { useEffect } from "react";
/**
* Applies the stored theme to <html> immediately on mount (client only).
* Must be rendered inside the layout BEFORE the page content.
*/
export function ThemeProvider({ children }: { children: React.ReactNode }) {
useEffect(() => {
try {
const raw = localStorage.getItem("planarchy_theme");
if (!raw) return;
const prefs = JSON.parse(raw) as { mode?: string; accent?: string };
const html = document.documentElement;
if (prefs.mode === "dark") html.classList.add("dark");
else html.classList.remove("dark");
if (prefs.accent) html.setAttribute("data-accent", prefs.accent);
} catch {}
}, []);
return <>{children}</>;
}