fen
8042116a69
topbar.js binds click handlers to every .dark-toggle, including the settings one; settings.js then also wired a delegation that re-clicked the topbar button, so each click flipped dark mode twice (net no-op). Mark buttons as wired in topbar.js and only add a fallback handler in settings.js when topbar.js did not run. CSS: center the toggle horizontally under the Settings title with auto margins, matching .settings-body padding. Closes #197
48 lines
2.0 KiB
JavaScript
48 lines
2.0 KiB
JavaScript
// #127: dark mode toggle: flips to the other variant of the active pair.
|
|
// #127: dark mode toggle - flips to the other variant of the active pair.
|
|
(function () {
|
|
var PAIRS = {
|
|
'midnight': { light: 'midnight-light', dark: 'midnight' },
|
|
'smooth': { light: 'smooth', dark: 'smooth-dark' },
|
|
'pastel-lavender': { light: 'pastel-lavender', dark: 'pastel-lavender-dark' },
|
|
'pastel-peach': { light: 'pastel-peach', dark: 'pastel-peach-dark' },
|
|
'pastel-cloud': { light: 'pastel-cloud', dark: 'pastel-cloud-dark' }
|
|
};
|
|
var root = document.documentElement;
|
|
function state() {
|
|
var p = root.dataset.preset || 'midnight';
|
|
for (var base in PAIRS) {
|
|
if (p === PAIRS[base].dark) return { base: base, dark: true };
|
|
if (p === PAIRS[base].light) return { base: base, dark: false };
|
|
}
|
|
return { base: 'midnight', dark: true };
|
|
}
|
|
function apply() {
|
|
var s = state();
|
|
document.body.classList.toggle('dark', s.dark);
|
|
root.classList.toggle('dark', s.dark);
|
|
}
|
|
function sync(btns) {
|
|
btns.forEach(function (b) {
|
|
b.setAttribute('aria-pressed', state().dark ? 'true' : 'false');
|
|
});
|
|
}
|
|
var btns = document.querySelectorAll('.dark-toggle');
|
|
apply();
|
|
sync(Array.prototype.slice.call(btns));
|
|
btns.forEach(function (b) {
|
|
// mark as wired so settings.js does not add a second handler
|
|
// (#197: double-binding made the settings toggle flip twice = no-op)
|
|
b.dataset.darkWired = '1';
|
|
b.addEventListener('click', function () {
|
|
var s = state();
|
|
var dark = !s.dark;
|
|
root.dataset.preset = dark ? PAIRS[s.base].dark : PAIRS[s.base].light;
|
|
try { localStorage.setItem('palette-dark', dark ? 'true' : 'false'); } catch (e) {}
|
|
apply();
|
|
sync(Array.prototype.slice.call(btns));
|
|
document.dispatchEvent(new CustomEvent('palette-darkchange'));
|
|
});
|
|
});
|
|
})();
|