MediaWiki:Common.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

      // =============
      // Button 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 Button schon existiert
        if ( document.getElementById( 'custom-theme-toggle' ) ) {
            return;
        }

        // eigenen Container im Header bauen
        var btn = document.createElement( 'button' );
        btn.id = 'custom-theme-toggle';
        btn.type = 'button';
        btn.className = 'vector-header-dark-toggle';
        btn.textContent = '🌙 Dark';

        // 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( btn, userMenu.nextSibling );
        } else {
            // Fallback: ganz ans Ende des Headers
            header.appendChild( btn );
        }
    });
});


      // =============
      // 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);
    }

    const toggleEl = document.getElementById('custom-theme-toggle');
    if (!toggleEl) return;

    function applyTheme(theme) {
        if (theme === 'dark') {
            linkEl.href = DARK_CSS;
            document.documentElement.classList.add('theme-dark');
            document.documentElement.classList.remove('theme-light');
            toggleEl.textContent = '☀️ Light';
        } else {
            linkEl.href = LIGHT_CSS;
            document.documentElement.classList.add('theme-light');
            document.documentElement.classList.remove('theme-dark');
            toggleEl.textContent = '🌙 Dark';
        }
    }

    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);

    toggleEl.addEventListener('click', function () {
        current = (current === 'dark') ? 'light' : 'dark';
        localStorage.setItem(THEME_KEY, current);
        applyTheme(current);
    });
})();