39 lines
1010 B
TypeScript
39 lines
1010 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
const STORAGE_KEY = "vantage-theme";
|
|
|
|
type Theme = "light" | "dark";
|
|
|
|
function currentTheme(): Theme {
|
|
const set = document.documentElement.getAttribute("data-theme");
|
|
if (set === "light" || set === "dark") return set;
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
}
|
|
|
|
export function ThemeToggle() {
|
|
const [theme, setTheme] = useState<Theme | null>(null);
|
|
|
|
useEffect(() => {
|
|
setTheme(currentTheme());
|
|
}, []);
|
|
|
|
function toggle() {
|
|
const next: Theme = currentTheme() === "dark" ? "light" : "dark";
|
|
document.documentElement.setAttribute("data-theme", next);
|
|
window.localStorage.setItem(STORAGE_KEY, next);
|
|
setTheme(next);
|
|
}
|
|
|
|
|
|
|
|
const label = theme === null ? "Theme" : theme === "dark" ? "Light" : "Dark";
|
|
|
|
return (
|
|
<button type="button" className="icon-btn" onClick={toggle} aria-label={`Switch to ${label.toLowerCase()} theme`}>
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|