66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
{{template "head" .}}
|
|
{{template "topbar" .}}
|
|
<div class="page">
|
|
<div class="float">
|
|
<div class="settings-head">
|
|
<h1>Settings</h1>
|
|
</div>
|
|
<div class="settings-body">
|
|
<h3>Theme</h3>
|
|
<div class="theme-grid" id="theme-grid"></div>
|
|
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(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 = [
|
|
{ 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' }
|
|
];
|
|
var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
|
|
|
|
function presetColors(id) {
|
|
var root = document.documentElement;
|
|
var prev = root.getAttribute('data-preset');
|
|
root.setAttribute('data-preset', id);
|
|
var cs = getComputedStyle(root);
|
|
var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
|
|
if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
|
|
return colors;
|
|
}
|
|
|
|
var grid = document.getElementById('theme-grid');
|
|
var current = document.documentElement.dataset.preset || 'midnight';
|
|
themeNames.forEach(function (t) {
|
|
var colors = presetColors(t.id);
|
|
var btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.className = 'theme-card';
|
|
btn.setAttribute('aria-pressed', current === t.id ? 'true' : 'false');
|
|
btn.innerHTML = '<strong>' + t.name + '</strong>' +
|
|
'<span class="swatches">' + colors.map(function (c) {
|
|
return '<span class="swatch" style="background:' + c + '"></span>';
|
|
}).join('') + '</span>';
|
|
btn.addEventListener('click', function () {
|
|
document.documentElement.dataset.preset = t.id;
|
|
try { localStorage.setItem('palette-theme', t.id); } catch (e) {}
|
|
grid.querySelectorAll('.theme-card').forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
|
|
btn.setAttribute('aria-pressed', 'true');
|
|
});
|
|
grid.appendChild(btn);
|
|
});
|
|
})();
|
|
</script>
|
|
{{template "foot" .}}
|