31 lines
772 B
TypeScript
31 lines
772 B
TypeScript
"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>
|
|
);
|
|
} |