LDAPWeb/server-connection/geonet-console/public/js/theme.js

(function () {
    var STORAGE_KEY = 'databaselist-ui-theme';
    var MODES = ['light', 'dark', 'system'];

    function resolve(mode) {
        if (mode === 'system') {
            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        }
        return mode === 'light' ? 'light' : 'dark';
    }

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

        var indicator = document.querySelector('[data-theme-indicator]');
        if (indicator) {
            var index = MODES.indexOf(mode);
            if (index < 0) {
                index = 2;
            }
            indicator.style.transform = 'translateX(' + (index * 100) + '%)';
        }
    }

    function applyPreference(mode) {
        if (MODES.indexOf(mode) < 0) {
            mode = 'system';
        }

        var root = document.documentElement;
        root.setAttribute('data-theme-pref', mode);
        root.setAttribute('data-theme', resolve(mode));

        try {
            localStorage.setItem(STORAGE_KEY, mode);
        } catch (e) {}

        syncToggle(mode);
    }

    window.setUiTheme = applyPreference;

    document.addEventListener('DOMContentLoaded', function () {
        var saved = 'system';
        try {
            saved = localStorage.getItem(STORAGE_KEY) || 'system';
        } catch (e) {}

        applyPreference(saved);

        document.querySelectorAll('[data-theme-set]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                applyPreference(btn.getAttribute('data-theme-set'));
            });
        });

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
            var pref = document.documentElement.getAttribute('data-theme-pref') || 'system';
            if (pref === 'system') {
                applyPreference('system');
            }
        });
    });
})();