Website/app/frontend/app.ts

import '@styles/app.scss';
import '@pkg/stimulus';

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');

initTheme();