40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import {Theme, THEME_LOCAL_STORAGE_ID} from '@const/theme';
|
|
|
|
const DARK_MODE_QUERY: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
function initTheme(): void {
|
|
handleTheme(DARK_MODE_QUERY.matches);
|
|
DARK_MODE_QUERY.addEventListener('change', handleThemeChange);
|
|
}
|
|
|
|
function handleThemeChange(e: MediaQueryListEvent): void {
|
|
handleTheme(e.matches);
|
|
}
|
|
|
|
function handleTheme(prefersDark: boolean): void {
|
|
const theme = localStorage[THEME_LOCAL_STORAGE_ID];
|
|
if (theme === Theme.DARK) {
|
|
document.documentElement.classList.add(Theme.DARK);
|
|
console.log('explicit dark');
|
|
} else if (!(THEME_LOCAL_STORAGE_ID in localStorage) && prefersDark) {
|
|
document.documentElement.classList.add(Theme.DARK);
|
|
console.log('implicit dark');
|
|
} else {
|
|
document.documentElement.classList.remove(Theme.DARK);
|
|
console.log('light');
|
|
}
|
|
}
|
|
|
|
export {initTheme};
|
|
|
|
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
|
|
|
|
|
// Whenever the user explicitly chooses light mode
|
|
//localStorage.theme = 'light';
|
|
|
|
// Whenever the user explicitly chooses dark mode
|
|
//localStorage.theme = 'dark';
|
|
|
|
// Whenever the user explicitly chooses to respect the OS preference
|
|
//localStorage.removeItem('theme');
|