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

    // Button im persönlichen Menü (oben rechts) hinzufügen
    var link = mw.util.addPortletLink(
        'p-personal',          // Portlet ID
        '#',                   // href, wird von JS gehandhabt
        '🌙 Dark',             // sichtbarer Text (wird von theme-switcher.js überschrieben)
        'custom-theme-toggle', // ID
        'Light/Dark umschalten'
    );
    link.id = 'custom-theme-toggle'; // für unser Script
});
      // =============
      // Switcher als Modul
      // =============
// Version für MediaWiki – z.B. in [[MediaWiki:Common.js]]
(function () {
    const THEME_KEY = 'custom-site-theme';
    const LIGHT_CSS = '/darktest/light-mode.css';
    const DARK_CSS  = '/darktest/dark-mode.css';

    // Falls du lieber ein eigenes <link> einfügst:
    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);
    });
})();