Files
v10/site/src/components/ThemeInit.astro
T

34 lines
1.2 KiB
Plaintext

---
import { THEME_KEY } from '@/consts';
---
{/* Dark mode initialization script - runs before paint to prevent FOUC */}
<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>