poslop/palette
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Settings page: theme switcher with live preview (#100)
CI / test (push) Successful in 23s
Details
CI / docker (push) Skipped
Details

Browse Source
This commit is contained in:
poslop
2026-09-09 18:21:45 -05:00
parent b1af398bea
commit 69da340224
1 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/templates/settings.html
+33 -1
View File
@@ -6,9 +6,41 @@
<h1>Settings</h1>
</div>
<div class="settings-body">
<p>Settings are under construction.</p>
<h3>Theme</h3>
<div class="theme-grid" id="theme-grid"></div>
<p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
<p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
</div>
</div>
</div>
<script>
(function () {
var themes = [
{ id: 'midnight', name: 'Midnight', colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
{ id: 'smooth', name: 'Smooth', colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
{ id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
{ id: 'pastel-peach', name: 'Pastel Peach', colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
{ id: 'pastel-cloud', name: 'Pastel Cloud', colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
];
var grid = document.getElementById('theme-grid');
var current = document.documentElement.dataset.preset || 'midnight';
themes.forEach(function (t) {
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">' + t.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" .}}