Theme pairs with dark mode toggle, gear active state, PALETTE_DEFAULT_DARK (#127)
- Collapse the 10 theme cards into 5 pairs: light swatches top row, dark bottom row - Dark mode toggle in settings and topbar (sun/moon inline SVG) - Toggling dark mode switches to the other variant of the selected pair - Persist pair id in localStorage palette-theme, dark flag in palette-dark - Head script resolves base+dark to variant; URL ?theme= accepts both ids and wins - Settings gear highlights like nav tabs on /settings - PALETTE_DEFAULT_DARK env var sets server default dark state (default on) - Server-side resolution helpers + tests
This commit is contained in:
fen
@@ -3,11 +3,48 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<script>
|
||||
// preset hook (#16): ?theme= wins; else persisted choice (#100)
|
||||
// preset hook (#16): ?theme= wins; else persisted choice (#100).
|
||||
// #127: theme pairs - each base theme has a light and dark variant;
|
||||
// palette-theme stores the base id, palette-dark the dark flag.
|
||||
(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' }
|
||||
};
|
||||
function resolve(t, dark) {
|
||||
for (var base in PAIRS) {
|
||||
if (t === PAIRS[base].light || t === PAIRS[base].dark) return t;
|
||||
if (t === base) return dark ? PAIRS[base].dark : PAIRS[base].light;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
var t = new URLSearchParams(location.search).get('theme');
|
||||
if (!t) try { t = localStorage.getItem('palette-theme'); } catch (e) {}
|
||||
if (t) document.documentElement.dataset.preset = t;
|
||||
// precedence: URL ?theme= > stored pair+dark prefs > server default dark > dark on
|
||||
var dark = {{ defaultDark }};
|
||||
try {
|
||||
var stored = localStorage.getItem('palette-dark');
|
||||
if (stored !== null) dark = stored !== 'false';
|
||||
} catch (e) {}
|
||||
if (t) {
|
||||
// URL ?theme= wins and accepts both base and variant ids; a variant id
|
||||
// also sets the dark flag and normalizes t back to its base pair id.
|
||||
var found = false;
|
||||
for (var base in PAIRS) {
|
||||
if (t === PAIRS[base].dark) { dark = true; t = base; found = true; break; }
|
||||
if (t === PAIRS[base].light) { dark = false; t = base; found = true; break; }
|
||||
if (t === base) { found = true; break; }
|
||||
}
|
||||
if (!found) t = null;
|
||||
}
|
||||
if (!t) {
|
||||
try { t = localStorage.getItem('palette-theme'); } catch (e) {}
|
||||
}
|
||||
if (!PAIRS[t]) t = 'midnight';
|
||||
// do not persist anything here: URL theme is a one-off override
|
||||
document.documentElement.dataset.preset = dark ? PAIRS[t].dark : PAIRS[t].light;
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
@@ -22,8 +59,57 @@
|
||||
<a href="https://git.archfox.org/poslop/palette" target="_blank" rel="noopener">Git<svg class="ext" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<a class="iconbtn gear" href="/settings" title="Settings" aria-label="Settings">
|
||||
<button class="iconbtn dark-toggle" id="dark-toggle" type="button" title="Toggle dark mode" aria-label="Toggle dark mode">
|
||||
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
||||
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||||
</button>
|
||||
<a class="iconbtn gear{{if eq .Page "settings"}} on{{end}}" href="/settings" title="Settings" aria-label="Settings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<script>
|
||||
// #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) {
|
||||
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'));
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{{end}}
|
||||
|
||||
Reference in New Issue
Block a user