|
|
| Zeile 1: |
Zeile 1: |
| //
| |
| 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);
| |
| }
| |
| });
| |
| //
| |
