MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 13. Februar 2026, 16:45 Uhr

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

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

    // Prüfen, ob schon geladen
    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;
    }

    // Warten, bis der Header im DOM ist
    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;
        }

        // Wrapper für den Slider
        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>';

        // Am rechten Rand einfügen – möglichst nahe beim User-Menü
        var userMenu = header.querySelector( '.vector-user-menu' );
        if ( userMenu && userMenu.parentNode ) {
            userMenu.parentNode.insertBefore( wrapper, userMenu.nextSibling );
        } else {
            // Fallback: ganz ans Ende des Headers
            header.appendChild( wrapper );
        }
    });
});

// ================
// 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';
    }
    applyTheme(current);

    // Checkbox-Change anbinden, wenn DOM fertig ist
    mw.hook( 'wikipage.content' ).add( function () {
        var checkbox = document.getElementById('theme-toggle-checkbox');
        if (!checkbox) return;

        checkbox.addEventListener('change', function () {
            current = checkbox.checked ? 'dark' : 'light';
            localStorage.setItem(THEME_KEY, current);
            applyTheme(current);
        }, { once: false });
    });
})();