Files
v10/site/src/components/ThemeInit.astro
T
2026-04-22 10:18:05 -05:00

43 lines
1.4 KiB
Plaintext

---
import { THEME_KEY } from '@/consts';
---
{/* Dark mode initialization script - runs before paint to prevent FOUC */}
{
/* ts(2570) on localStorageKey is expected — astro check can't see define:vars injections (withastro/language-tools#711) */
}
<script is:inline define:vars={{ localStorageKey: THEME_KEY }}>
if (
typeof localStorage !== "undefined" &&
typeof document !== "undefined" &&
typeof document.documentElement !== "undefined"
) {
let localStorageValue = localStorage[localStorageKey];
const isValidKey =
localStorageValue === "light" ||
localStorageValue === "dark" ||
localStorageValue === "system";
if (!localStorageValue || !isValidKey) {
localStorage[localStorageKey] = "system";
localStorageValue = "system";
}
let isDark = false;
if (localStorageValue === "dark") {
document.documentElement.classList.add("dark");
isDark = true;
} else if (localStorageValue === "system") {
if (
typeof window.matchMedia !== "undefined" &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.documentElement.classList.add("dark");
isDark = true;
}
}
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (themeColorMeta) {
themeColorMeta.setAttribute("content", isDark ? "#393836" : "#ebe4c1");
}
}
</script>