39 lines
1.4 KiB
JavaScript
39 lines
1.4 KiB
JavaScript
/* ============================================================
|
|
THEME.JS — Hell/Dunkel ohne Inline-Skript (CSP-fest)
|
|
Version: 2.1.0
|
|
|
|
Im <head> OHNE defer einbinden, damit das Theme vor dem ersten Rendern
|
|
steht (kein Aufflackern):
|
|
<script src="/static/js/theme.js"></script>
|
|
|
|
Umschalten: <button data-action="theme-toggle">…</button>
|
|
Icons: .icon-theme-light / .icon-theme-dark (components.css) zeigen sich
|
|
je nach Theme, ganz ohne JavaScript.
|
|
|
|
Gespeichert in localStorage unter "theme". Ohne gespeicherten Wert gilt
|
|
prefers-color-scheme des Systems.
|
|
============================================================ */
|
|
|
|
(function () {
|
|
var root = document.documentElement;
|
|
|
|
function gespeichert() {
|
|
try { return localStorage.getItem('theme'); } catch (e) { return null; }
|
|
}
|
|
|
|
function setzen(theme) {
|
|
root.dataset.theme = theme;
|
|
try { localStorage.setItem('theme', theme); } catch (e) { /* privat oder gesperrt */ }
|
|
}
|
|
|
|
var start = gespeichert();
|
|
if (!start && window.matchMedia) {
|
|
start = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
root.dataset.theme = start || root.dataset.theme || 'light';
|
|
|
|
document.addEventListener('click', function (e) {
|
|
var el = e.target.closest && e.target.closest('[data-action="theme-toggle"]');
|
|
if (el) setzen(root.dataset.theme === 'dark' ? 'light' : 'dark');
|
|
});
|
|
})();
|