49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
type Theme = "dark" | "light";
|
|
|
|
const STORAGE_KEY = "theme";
|
|
|
|
type ThemeToggleProps = {
|
|
label: string;
|
|
lightLabel: string;
|
|
darkLabel: string;
|
|
};
|
|
|
|
function isTheme(value: string | null): value is Theme {
|
|
return value === "dark" || value === "light";
|
|
}
|
|
|
|
export default function ThemeToggle({ label, lightLabel, darkLabel }: ThemeToggleProps) {
|
|
const [theme, setTheme] = useState<Theme>("dark");
|
|
|
|
useEffect(() => {
|
|
const storedTheme = localStorage.getItem(STORAGE_KEY);
|
|
const activeTheme: Theme = isTheme(storedTheme) ? storedTheme : "dark";
|
|
|
|
document.documentElement.setAttribute("data-theme", activeTheme);
|
|
setTheme(activeTheme);
|
|
}, []);
|
|
|
|
const handleToggle = () => {
|
|
const nextTheme: Theme = theme === "dark" ? "light" : "dark";
|
|
|
|
setTheme(nextTheme);
|
|
document.documentElement.setAttribute("data-theme", nextTheme);
|
|
localStorage.setItem(STORAGE_KEY, nextTheme);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleToggle}
|
|
className="theme-toggle"
|
|
aria-label={`${label}: ${theme === "dark" ? lightLabel : darkLabel}`}
|
|
>
|
|
<span className="theme-toggle-label">{theme === "dark" ? lightLabel : darkLabel}</span>
|
|
</button>
|
|
);
|
|
}
|