Update components/theme-debug.tsx

components/theme-debug.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+
+export function ThemeDebug() {
+  const { theme, resolvedTheme, systemTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [bodyClass, setBodyClass] = useState("");
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (mounted) {
+      setBodyClass(document.body.className);
+    }
+  }, [theme, mounted]);
+
+  if (!mounted) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-gray-800 text-white p-4 rounded text-xs max-w-xs">
+      <div>Theme: {theme}</div>
+      <div>Resolved: {resolvedTheme}</div>
+      <div>System: {systemTheme}</div>
+      <div>Body classes: {bodyClass}</div>
+    </div>
+  );
+}