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 () {

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

  function applyTheme(theme) {
    var html = document.documentElement;
    html.classList.remove('theme-dark', 'theme-light');
    html.classList.add('theme-' + theme);
  }

  function setTheme(theme) {
    document.cookie = 'pixoTheme=' + theme +
      '; path=/; max-age=' + (60 * 60 * 24 * 365);
    applyTheme(theme);
    updateDropdown(theme);
  }

  function updateDropdown(theme) {
    var label = document.querySelector('[data-identifier="theme-dropdown-label"]');
    if (!label) return;
    label.textContent = (theme === 'dark') ? 'Dark' : 'Light';
  }

  // Start-Theme: Cookie oder Default
  var theme = getTheme() || 'dark';
  applyTheme(theme);

  // In den Header einhängen (Vector 2022)
  var header = document.querySelector('.vector-header-container .vector-header-start');
  if (!header) header = document.querySelector('.vector-header-container');

  if (header) {
    var wrapper = document.createElement('div');
    wrapper.className = 'pixo-theme-dropdown';
    wrapper.setAttribute('data-identifier', 'theme-dropdown');

    wrapper.innerHTML = '' +
      '<button class="pixo-theme-button" type="button">' +
        '<span data-identifier="theme-dropdown-label"></span> ▾' +
      '</button>' +
      '<div class="pixo-theme-menu">' +
        '<button type="button" data-theme-value="light">Light</button>' +
        '<button type="button" data-theme-value="dark">Dark</button>' +
      '</div>';

    header.appendChild(wrapper);

    // Klick-Logik
    var btn = wrapper.querySelector('.pixo-theme-button');
    var menu = wrapper.querySelector('.pixo-theme-menu');

    btn.addEventListener('click', function () {
      menu.classList.toggle('is-open');
    });

    menu.addEventListener('click', function (e) {
      if (e.target.dataset.themeValue) {
        theme = e.target.dataset.themeValue;
        setTheme(theme);
        menu.classList.remove('is-open');
      }
    });

    // Label initial setzen
    updateDropdown(theme);
  }
});