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}}
|
||||
|
||||
@@ -8,6 +8,11 @@
|
||||
<div class="settings-body">
|
||||
<h3>Theme</h3>
|
||||
<div class="theme-grid" id="theme-grid"></div>
|
||||
<button class="iconbtn dark-toggle" id="settings-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>
|
||||
<span>Dark mode</span>
|
||||
</button>
|
||||
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,17 +21,13 @@
|
||||
(function () {
|
||||
// #112: derive each preset's swatches from the real CSS variables in
|
||||
// app.css by temporarily applying data-preset, so they can never drift.
|
||||
var themeNames = [
|
||||
// #127: 5 theme pairs, light swatches top row, dark bottom row.
|
||||
var pairs = [
|
||||
{ id: 'midnight', name: 'Midnight' },
|
||||
{ id: 'smooth', name: 'Smooth' },
|
||||
{ id: 'pastel-lavender', name: 'Pastel Lavender' },
|
||||
{ id: 'pastel-peach', name: 'Pastel Peach' },
|
||||
{ id: 'pastel-cloud', name: 'Pastel Cloud' },
|
||||
{ id: 'midnight-light', name: 'Midnight Light' },
|
||||
{ id: 'smooth-dark', name: 'Smooth Dark' },
|
||||
{ id: 'pastel-lavender-dark', name: 'Pastel Lavender Dark' },
|
||||
{ id: 'pastel-peach-dark', name: 'Pastel Peach Dark' },
|
||||
{ id: 'pastel-cloud-dark', name: 'Pastel Cloud Dark' }
|
||||
{ id: 'pastel-cloud', name: 'Pastel Cloud' }
|
||||
];
|
||||
var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
|
||||
|
||||
@@ -40,26 +41,60 @@
|
||||
return colors;
|
||||
}
|
||||
|
||||
// current base pair + dark flag from the resolved data-preset.
|
||||
// "midnight" is itself the dark variant, so check dark ids first.
|
||||
function state() {
|
||||
var p = document.documentElement.dataset.preset || 'midnight';
|
||||
if (p === 'midnight' || /-dark$/.test(p)) {
|
||||
return { base: p === 'midnight' ? 'midnight' : p.replace(/-dark$/, ''), dark: true };
|
||||
}
|
||||
return { base: p === 'midnight-light' ? 'midnight' : p, dark: false };
|
||||
}
|
||||
|
||||
var grid = document.getElementById('theme-grid');
|
||||
var current = document.documentElement.dataset.preset || 'midnight';
|
||||
themeNames.forEach(function (t) {
|
||||
var colors = presetColors(t.id);
|
||||
var cards = {};
|
||||
pairs.forEach(function (t) {
|
||||
var light = presetColors(t.id);
|
||||
var dark = presetColors(t.id + '-dark');
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'theme-card';
|
||||
btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
|
||||
btn.setAttribute('aria-pressed', 'false');
|
||||
btn.setAttribute('data-pair', t.id);
|
||||
btn.innerHTML = '<strong>' + t.name + '</strong>' +
|
||||
'<span class="swatches">' + colors.map(function (c) {
|
||||
'<span class="swatches">' + light.map(function (c) {
|
||||
return '<span class="swatch" style="background:' + c + '"></span>';
|
||||
}).join('') + '</span>' +
|
||||
'<span class="swatches">' + dark.map(function (c) {
|
||||
return '<span class="swatch" style="background:' + c + '"></span>';
|
||||
}).join('') + '</span>';
|
||||
btn.addEventListener('click', function () {
|
||||
document.documentElement.dataset.preset = t.id;
|
||||
var dark = state().dark;
|
||||
document.documentElement.dataset.preset = dark ? t.id + '-dark' : t.id;
|
||||
try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
|
||||
grid.querySelectorAll('.theme-card').forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
|
||||
Object.keys(cards).forEach(function (k) { cards[k].setAttribute('aria-pressed', 'false'); });
|
||||
btn.setAttribute('aria-pressed', 'true');
|
||||
});
|
||||
cards[t.id] = btn;
|
||||
grid.appendChild(btn);
|
||||
});
|
||||
|
||||
function sync() {
|
||||
var s = state();
|
||||
Object.keys(cards).forEach(function (k) {
|
||||
cards[k].setAttribute('aria-pressed', k === s.base ? 'true' : 'false');
|
||||
});
|
||||
var dt = document.getElementById('settings-dark-toggle');
|
||||
if (dt) dt.setAttribute('aria-pressed', s.dark ? 'true' : 'false');
|
||||
}
|
||||
sync();
|
||||
// the topbar script runs before this button exists, so wire it here
|
||||
var dt = document.getElementById('settings-dark-toggle');
|
||||
dt.addEventListener('click', function () {
|
||||
var btns = document.querySelectorAll('.topbar .dark-toggle');
|
||||
if (btns.length) btns[0].click(); else document.dispatchEvent(new CustomEvent('palette-darkchange'));
|
||||
});
|
||||
document.addEventListener('palette-darkchange', sync);
|
||||
})();
|
||||
</script>
|
||||
{{template "foot" .}}
|
||||
|
||||
Reference in New Issue
Block a user