Automatische Umschaltfunktion (Light/Dark Mode) – MediaWiki-kompatible JavaScript/CSS-Lösung
Viele MediaWiki-Plattformen unterstützen benutzerdefinierte Skripte. Die folgende Logik ermöglicht eine dynamische Umschaltung zwischen Light- und Darkmode-Navigationsbox, je nach Nutzerpräferenz oder Systemzeit (wenn gewünscht, mit LocalStorage-Speicherung):
💻 JavaScript-Snippet (für MediaWiki:Common.js)
document.addEventListener("DOMContentLoaded", function () {
const root = document.documentElement;
const toggle = document.getElementById("xal-theme-toggle");
function setTheme(mode) {
if (mode === "dark") {
root.classList.add("xal-dark");
root.classList.remove("xal-light");
localStorage.setItem("xalTheme", "dark");
} else {
root.classList.add("xal-light");
root.classList.remove("xal-dark");
localStorage.setItem("xalTheme", "light");
}
}
// Initialeinstellung
const saved = localStorage.getItem("xalTheme");
if (saved) setTheme(saved);
else setTheme("dark"); // Default
toggle.addEventListener("click", function () {
const isDark = root.classList.contains("xal-dark");
setTheme(isDark ? "light" : "dark");
});
});
🎨 CSS-Snippet (für MediaWiki:Common.css)
/* Basisfarben */ .xal-light .xal-box {
background-color: #f4f8fb; border: 2px solid #0077b6; color: #000;
}
.xal-light .xal-table {
background-color: #ffffff; color: #000;
}
.xal-dark .xal-box {
background-color: #121821; border: 2px solid #4dd0e1; color: #f0f0f0;
}
.xal-dark .xal-table {
background-color: #1a222c; color: #f8f8f8;
}
.xal-dark .xal-table th {
background-color: #263342; color: #fff;
}
.xal-light .xal-table th {
background-color: #e0f0fa; color: #000;
}
🧩 HTML-Integration mit Button:
<button id="xal-theme-toggle" style="float:right; margin-bottom:10px;">🌓 Modus wechseln</button>
XAL’THORIANISCHE BEOBACHTUNGSREIHE: TERRA-3
| OBERKATEGORIE | VERLINKTER KNOTEN |
|---|---|
| Einführung zur Mission | DIE XAL’THOREI UND DER GESTRANDETE FORSCHER |