MediaWiki:Common.js: Unterschied zwischen den Versionen
Erscheinungsbild
Die Seite wurde geleert. Markierungen: Geleert Manuelle Zurücksetzung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
// 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); | |||
}); | |||
})(); | |||
Version vom 13. Februar 2026, 14:32 Uhr
// 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);
});
})();