h5/js/theme.js

(function () {
    const supportedThemes = ['dark', 'light'];
    const defaultTheme = 'light';
    const storageKey = 'bex_preferred_theme';
    let autoInitSkipped = false;

    function normalizeTheme(theme) {
        return supportedThemes.includes(theme) ? theme : '';
    }

    function getCurrentTheme() {
        const urlParams = new URLSearchParams(window.location.search);
        const themeFromUrl = normalizeTheme(urlParams.get('theme'));
        if (themeFromUrl) return themeFromUrl;

        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
            return 'light';
        }

        return defaultTheme;
    }

    function setTheme(theme) {
        const nextTheme = normalizeTheme(theme);
        if (!nextTheme) return;

        const root = document.documentElement;
        const body = document.body;
        const container = document.querySelector('.container');

        if (root) {
            root.classList.remove('theme-dark', 'theme-light');
            root.classList.add('theme-' + nextTheme);
        }

        if (body) {
            body.classList.remove('theme-dark', 'theme-light');
            body.classList.add('theme-' + nextTheme);
        }

        if (container) {
            container.classList.remove('theme-dark', 'theme-light');
            container.classList.add('theme-' + nextTheme);
        }

        // try {
        //     localStorage.setItem(storageKey, nextTheme);
        // } catch (e) {}

        window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: nextTheme } }));
    }

    const BEXTheme = {
        supportedThemes: supportedThemes,
        defaultTheme: defaultTheme,
        getCurrentTheme: getCurrentTheme,
        setTheme: setTheme,
        toggleTheme: function () {
            const nextTheme = getCurrentTheme() === 'dark' ? 'light' : 'dark';
            setTheme(nextTheme);
            return nextTheme;
        },
        init: function () {
            setTheme(getCurrentTheme());
        },
        skipAutoInit: function () {
            autoInitSkipped = true;
        }
    };

    window.BEXTheme = BEXTheme;

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () {
            if (!autoInitSkipped) {
                BEXTheme.init();
            }
        });
    } else if (!autoInitSkipped) {
        BEXTheme.init();
    }
})();