assets/js/darkmode.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

(() => {
    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)
})();