yuuki-deidad

lib/theme-context.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React, { createContext, useContext, useState, useEffect, useCallback } from "react";
+
+export type ThemeMode = "light" | "dark" | "pastel";
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  accentColor: string;
+  setAccentColor: (hex: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
+
+export function YuukiThemeProvider({ children }: { children: React.ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>("dark");
+  const [accentColor, setAccentColorState] = useState("#fafafa");
+
+  useEffect(() => {
+    const stored = localStorage.getItem("yuuki-theme-mode") as ThemeMode | null;
+    const storedAccent = localStorage.getItem("yuuki-accent-color");
+    if (stored) setModeState(stored);
+    if (storedAccent) setAccentColorState(storedAccent);
+  }, []);
+
+  const applyMode = useCallback((m: ThemeMode) => {
+    const html = document.documentElement;
+    html.classList.remove("dark", "pastel");
+    if (m === "dark") html.classList.add("dark");
+    if (m === "pastel") html.classList.add("pastel");
+  }, []);
+
+  const applyAccent = useCallback((hex: string) => {
+    document.documentElement.style.setProperty("--user-accent", hex);
+  }, []);
+
+  useEffect(() => {
+    applyMode(mode);
+  }, [mode, applyMode]);
+
+  useEffect(() => {
+    applyAccent(accentColor);
+  }, [accentColor, applyAccent]);
+
+  const setMode = useCallback((m: ThemeMode) => {
+    setModeState(m);
+    localStorage.setItem("yuuki-theme-mode", m);
+  }, []);
+
+  const setAccentColor = useCallback((hex: string) => {
+    setAccentColorState(hex);
+    localStorage.setItem("yuuki-accent-color", hex);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ mode, setMode, accentColor, setAccentColor }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useYuukiTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useYuukiTheme must be used within YuukiThemeProvider");
+  return ctx;
+}