(() => {
    const THEME = 'geedeapro.theme' // auto | light | dakr
    const mql = window.matchMedia('(prefers-color-scheme: dark)')

    function useDarkMode(store) {
        document.documentElement.classList.add('dark')
        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
        if (store) localStorage.setItem(THEME, 'dark')
    }

    function useLightMode(store) {
        document.documentElement.classList.remove('dark')
        if (localStorage.getItem(THEME) != 'auto') mql.onchange = null
        if (store) localStorage.setItem(THEME, 'light')
    }

    function useSystem(store) {
        if (mql.matches) useDarkMode()
        else useLightMode()
        mql.onchange = e => {
            console.log("changed when system changed")
            if (e.matches) useDarkMode()
            else useLightMode()
        }
        if (store) localStorage.setItem(THEME, 'auto')
    }

    window.switchTheme = (theme, store) => {
        if (!theme || theme === 'auto') useSystem(store)
        else if (theme === 'dark') useDarkMode(store)
        else if (theme === 'light') useLightMode(store)
    }

    // use preferred theme immediately upon DOM loaded
    window.switchTheme(localStorage.getItem(THEME), false)
})();