feat: apply CSS changes on JS input & change color events scidsg#573

For Roadmap Item scidsg#533

hushline/static/js/settings.js

@@ -75,6 +75,24 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   });
 
+  // Update color in real-time as they're being browsed
+  document
+    .getElementById("brand-primary-color")
+    .addEventListener("input", function(event) {
+      const brandColor = `lch(from ${event.target.value} l c h)`;
+      document.documentElement.style.setProperty("--color-brand", brandColor);
+      document.body.offsetHeight;  // force a reflow
+    });
+
+  // Update color once it's been finalized
+  document
+    .getElementById("brand-primary-color")
+    .addEventListener("change", function(event) {
+      const brandColor = `lch(from ${event.target.value} l c h)`;
+      document.documentElement.style.setProperty("--color-brand", brandColor);
+      document.body.offsetHeight;  // force a reflow
+    });
+
   var forwarding_enabled = document.querySelector(
     "input[id='forwarding_enabled']",
   ).checked;