qihuo/static/js/theme.js

(function () {
    var KEY = 'qihuo-theme';

    function updateButtons(theme) {
        document.querySelectorAll('[data-theme-pick]').forEach(function (btn) {
            var pick = btn.getAttribute('data-theme-pick');
            var on = pick === theme;
            btn.classList.toggle('active', on);
            btn.setAttribute('aria-pressed', on ? 'true' : 'false');
        });
    }

    function apply(theme) {
        if (theme !== 'light' && theme !== 'dark') {
            theme = 'dark';
        }
        document.documentElement.setAttribute('data-theme', theme);
        try {
            localStorage.setItem(KEY, theme);
        } catch (e) { /* ignore */ }
        updateButtons(theme);
    }

    var saved = null;
    try {
        saved = localStorage.getItem(KEY);
    } catch (e) { /* ignore */ }

    if (saved === 'light' || saved === 'dark') {
        apply(saved);
    } else {
        var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
        apply(prefersLight ? 'light' : 'dark');
    }

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-theme-pick]');
        if (!btn) return;
        e.preventDefault();
        apply(btn.getAttribute('data-theme-pick'));
    });

    function syncButtons() {
        var cur = document.documentElement.getAttribute('data-theme') || 'dark';
        updateButtons(cur);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', syncButtons);
    } else {
        syncButtons();
    }
})();