Adding a new settings page and other tweaks for how it looks

2026-08-20 17:04:21 -04:00
parent 13de434e6c
commit a604569a45
6 changed files with 649 additions and 68 deletions
@@ -0,0 +1,30 @@
+// Applies the user's saved display settings (theme, accent color, font,
+// layout width, density, card style, corner radius) to whichever page
+// includes this script. Settings are fetched from /api/settings, which
+// resolves the stored choices into actual CSS values server-side, so
+// this file doesn't need to duplicate any of those mappings.
+(function () {
+    function apply(data) {
+        const root = document.documentElement;
+        const vars = data.css_vars || {};
+        Object.keys(vars).forEach(function (name) {
+            root.style.setProperty(name, vars[name]);
+        });
+
+        const settings = data.settings || {};
+        if (settings.theme) root.setAttribute('data-theme', settings.theme);
+        if (settings.density) root.setAttribute('data-density', settings.density);
+        if (settings.card_style) root.setAttribute('data-card-style', settings.card_style);
+    }
+
+    fetch('/api/settings')
+        .then(function (r) { return r.json(); })
+        .then(apply)
+        .catch(function (err) {
+            console.warn('Could not load display settings, using page defaults:', err);
+        });
+
+    // Exposed so the settings page itself can live-preview changes
+    // before saving.
+    window.__offlineuApplyTheme = apply;
+})();