51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Moon, Sun, SunMoon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
export function ThemeToggle() {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [isDark, setIsDark] = useState(false);
|
|
const { t } = useI18n();
|
|
|
|
useEffect(() => {
|
|
const root = document.documentElement;
|
|
const media = window.matchMedia("(prefers-color-scheme: dark)");
|
|
const syncSystemTheme = () => {
|
|
if (!window.localStorage.getItem("wtr:theme")) {
|
|
root.classList.toggle("dark", media.matches);
|
|
setIsDark(media.matches);
|
|
}
|
|
};
|
|
const animationFrame = window.requestAnimationFrame(() => {
|
|
setIsDark(root.classList.contains("dark"));
|
|
setMounted(true);
|
|
});
|
|
media.addEventListener("change", syncSystemTheme);
|
|
return () => {
|
|
window.cancelAnimationFrame(animationFrame);
|
|
media.removeEventListener("change", syncSystemTheme);
|
|
};
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const nextIsDark = !isDark;
|
|
document.documentElement.classList.toggle("dark", nextIsDark);
|
|
window.localStorage.setItem("wtr:theme", nextIsDark ? "dark" : "light");
|
|
setIsDark(nextIsDark);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="icon"
|
|
type="button"
|
|
aria-label={!mounted ? t("theme.change") : isDark ? t("theme.light") : t("theme.dark")}
|
|
onClick={toggleTheme}
|
|
>
|
|
{!mounted ? <SunMoon className="size-4" /> : isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
|
|
</Button>
|
|
);
|
|
}
|