MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 13. Februar 2026, 17:09 Uhr

// ========================
// Toggle-Switch-CSS nachladen
// ========================

(function () {
    var href = '/darktest/toggle-switch.css';

    var existing = document.querySelector('link[rel="stylesheet"][href="' + href + '"]');
    if (existing) return;

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
})();

// =============
// Slider einbinden
// =============
mw.loader.using('mediawiki.util', function () {
    if (mw.config.get('skin') !== 'vector-2022') {
        return;
    }

    mw.hook('wikipage.content').add(function () {
        var header = document.querySelector('.vector-header');
        if (!header) return;

        // Prüfen, ob der Slider schon existiert
        if (document.getElementById('theme-toggle-checkbox')) {
            return;
        }

        var wrapper = document.createElement('div');
        wrapper.className = 'vector-header-dark-toggle';

        wrapper.innerHTML = ''
            + '<label class="theme-toggle-switch">'
            + '  <input type="checkbox" id="theme-toggle-checkbox" />'
            + '  <span class="theme-toggle-slider"></span>'
            + '</label>';

        var userMenu = header.querySelector('.vector-user-menu');
        if (userMenu && userMenu.parentNode) {
            userMenu.parentNode.insertBefore(wrapper, userMenu.nextSibling);
        } else {
            header.appendChild(wrapper);
        }

        // Wenn der Slider neu eingefügt wurde, Theme-Status auf Checkbox anwenden
        if (typeof window.__applyThemeFromCurrent === 'function') {
            window.__applyThemeFromCurrent();
        }
    });
});

// ================
// Switcher als Modul
// ================
(function () {
    const THEME_KEY = 'custom-site-theme';
    const LIGHT_CSS = '/darktest/light-mode.css';
    const DARK_CSS  = '/darktest/dark-mode.css';

    let linkEl = document.getElementById('theme-css');
    if (!linkEl) {
        linkEl = document.createElement('link');
        linkEl.id = 'theme-css';
        linkEl.rel = 'stylesheet';
        linkEl.href = LIGHT_CSS;
        document.head.appendChild(linkEl);
    }

    function applyTheme(theme) {
        var checkbox = document.getElementById('theme-toggle-checkbox');

        if (theme === 'dark') {
            linkEl.href = DARK_CSS;
            document.documentElement.classList.add('theme-dark');
            document.documentElement.classList.remove('theme-light');
            if (checkbox) checkbox.checked = true;
        } else {
            linkEl.href = LIGHT_CSS;
            document.documentElement.classList.add('theme-light');
            document.documentElement.classList.remove('theme-dark');
            if (checkbox) checkbox.checked = false;
        }
    }

    let current = localStorage.getItem(THEME_KEY);
    if (!current) {
        const prefersDark = window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches;
        current = prefersDark ? 'dark' : 'light';
    }

    // Helfer, damit der Slider nachträglich synchronisiert werden kann
    window.__applyThemeFromCurrent = function () {
        applyTheme(current);
    };

    // Direkt initial anwenden (falls Checkbox schon da ist, wird sie gesetzt)
    applyTheme(current);

    mw.hook('wikipage.content').add(function () {
        var checkbox = document.getElementById('theme-toggle-checkbox');
        if (!checkbox) return;

        // Doppelte Listener vermeiden
        checkbox.removeEventListener('change', checkbox.__themeChangeHandler || function () {});

        var handler = function () {
            current = checkbox.checked ? 'dark' : 'light';
            localStorage.setItem(THEME_KEY, current);
            applyTheme(current);
        };

        checkbox.__themeChangeHandler = handler;
        checkbox.addEventListener('change', handler);
    });
})();