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

mw.loader.using( 'mediawiki.util', function () {

  // 1. Theme aus Cookie lesen
  function getTheme() {
    var m = document.cookie.match(/(^|;\s*)pixoTheme=(dark|light)/);
    return m ? m[2] : null;
  }

  // 2. Theme auf <html> anwenden
  function applyTheme(theme) {
    var html = document.documentElement;
    html.classList.remove('theme-dark', 'theme-light');
    html.classList.add('theme-' + theme);
  }

  // 3. Theme setzen + Cookie schreiben (1 Jahr gültig)
  function setTheme(theme) {
    document.cookie = 'pixoTheme=' + theme +
      '; path=/; max-age=' + (60 * 60 * 24 * 365);
    applyTheme(theme);
    updateLabel(theme);
  }

  // 4. Label des Schalters aktualisieren
  function updateLabel(theme) {
    var el = document.getElementById('pixo-theme-toggle');
    if (!el) return;
    el.textContent = theme === 'dark' ? '☀ Design (hell)' : '🌙 Design (dunkel)';
  }

  // 5. Start-Theme bestimmen (Cookie oder Standard)
  var theme = getTheme() || 'dark';   // Standard: dunkel
  applyTheme(theme);

  // 6. Toggle-Button oben ins Benutzer-Menü / Kopfbereich einfügen
  var personal = document.getElementById('p-personal') ||
                 document.getElementById('vector-user-links');

  if (personal) {
    var ul = personal.querySelector('ul') || personal;
    var li = document.createElement('li');
    li.id = 'pt-pixo-theme';

    var a = document.createElement('a');
    a.id = 'pixo-theme-toggle';
    a.href = '#';
    a.onclick = function (e) {
      e.preventDefault();
      setTheme(theme === 'dark' ? 'light' : 'dark');
      theme = (theme === 'dark') ? 'light' : 'dark';
    };

    li.appendChild(a);
    ul.appendChild(li);
    updateLabel(theme);
  }
});