48 lines
1.4 KiB
React
48 lines
1.4 KiB
React
"use client";
|
|
|
|
import React from "react";
|
|
import { useEffect, useState } from "react";
|
|
import {
|
|
readThemePreference,
|
|
resolveTheme,
|
|
saveThemePreference,
|
|
toggleTheme,
|
|
} from "@/lib/theme-preference.js";
|
|
|
|
function applyTheme(theme) {
|
|
document.documentElement.dataset.theme = theme;
|
|
document.documentElement.style.colorScheme = theme;
|
|
}
|
|
|
|
export default function ThemeToggle() {
|
|
const [theme, setTheme] = useState("light");
|
|
|
|
useEffect(() => {
|
|
const nextTheme = resolveTheme({
|
|
savedTheme: readThemePreference(window.localStorage),
|
|
systemPrefersDark: window.matchMedia?.("(prefers-color-scheme: dark)").matches,
|
|
});
|
|
setTheme(nextTheme);
|
|
applyTheme(nextTheme);
|
|
}, []);
|
|
|
|
const switchTheme = () => {
|
|
const nextTheme = toggleTheme(theme);
|
|
setTheme(nextTheme);
|
|
saveThemePreference(nextTheme, window.localStorage);
|
|
applyTheme(nextTheme);
|
|
};
|
|
|
|
const isDark = theme === "dark";
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={switchTheme}
|
|
aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
|
|
className="theme-toggle rounded-lg border px-3 py-2 text-sm font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-500 focus-visible:ring-offset-2"
|
|
>
|
|
<span aria-hidden="true" className="mr-1.5">{isDark ? "☀" : "☾"}</span>
|
|
{isDark ? "Light mode" : "Dark mode"}
|
|
</button>
|
|
);
|
|
} |