67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
type Theme = "light" | "dark";
|
||
|
|
|
||
|
|
const STORAGE_KEY = "theme-preference";
|
||
|
|
|
||
|
|
function applyTheme(theme: Theme) {
|
||
|
|
document.documentElement.dataset.theme = theme;
|
||
|
|
window.localStorage.setItem(STORAGE_KEY, theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCurrentTheme(): Theme {
|
||
|
|
const currentTheme = document.documentElement.dataset.theme;
|
||
|
|
if (currentTheme === "light" || currentTheme === "dark") {
|
||
|
|
return currentTheme;
|
||
|
|
}
|
||
|
|
|
||
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ThemeToggle() {
|
||
|
|
const toggleTheme = () => {
|
||
|
|
const nextTheme = getCurrentTheme() === "dark" ? "light" : "dark";
|
||
|
|
applyTheme(nextTheme);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={toggleTheme}
|
||
|
|
title="Toggle color theme"
|
||
|
|
aria-label="Toggle color theme"
|
||
|
|
className="theme-toggle inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent text-muted-strong transition-colors hover:border-line hover:text-ink"
|
||
|
|
>
|
||
|
|
<span className="sr-only">Toggle color theme</span>
|
||
|
|
<svg
|
||
|
|
aria-hidden="true"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
className="theme-toggle__sun h-3.5 w-3.5 fill-none stroke-current"
|
||
|
|
strokeWidth="1.7"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<circle cx="12" cy="12" r="4" />
|
||
|
|
<path d="M12 2.5v2.2" />
|
||
|
|
<path d="M12 19.3v2.2" />
|
||
|
|
<path d="m4.9 4.9 1.6 1.6" />
|
||
|
|
<path d="m17.5 17.5 1.6 1.6" />
|
||
|
|
<path d="M2.5 12h2.2" />
|
||
|
|
<path d="M19.3 12h2.2" />
|
||
|
|
<path d="m4.9 19.1 1.6-1.6" />
|
||
|
|
<path d="m17.5 6.5 1.6-1.6" />
|
||
|
|
</svg>
|
||
|
|
<svg
|
||
|
|
aria-hidden="true"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
className="theme-toggle__moon h-3.5 w-3.5 fill-none stroke-current"
|
||
|
|
strokeWidth="1.7"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
>
|
||
|
|
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|