41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { IconSun, IconMoon } from "@tabler/icons-react";
|
|
import { useState, useEffect } from "react";
|
|
|
|
export default function ThemeToggle() {
|
|
const [darkTheme, setDarkTheme] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onChange = (e: MediaQueryListEvent) => changeTheme(e.matches ? "dark" : "light");
|
|
|
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onChange);
|
|
|
|
changeTheme(window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
|
|
|
return () => {
|
|
window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", onChange);
|
|
};
|
|
}, []);
|
|
|
|
function changeTheme(theme: "dark" | "light") {
|
|
if (theme === "dark") {
|
|
document.documentElement.setAttribute("data-theme", "chessuDark");
|
|
setDarkTheme(true);
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "chessuLight");
|
|
setDarkTheme(false);
|
|
}
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => changeTheme(darkTheme ? "light" : "dark")}
|
|
className={"btn btn-ghost btn-circle swap swap-rotate" + (darkTheme ? " swap-active" : "")}
|
|
>
|
|
<IconSun className="swap-on m-auto block h-full" />
|
|
<IconMoon className="swap-off m-auto block h-full" />
|
|
</button>
|
|
);
|
|
}
|