From: Chris Fulljames <christianfulljames@gmail.com>
Date: Fri, 7 Feb 2025 02:53:40 +0000 (-0500)
Subject: Fix color pickers not rendering in real time
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=f7a5e34913c825c3cf9ab09b568a637968d5987d;p=littlesongplace.git

Fix color pickers not rendering in real time
---

diff --git a/templates/profile.html b/templates/profile.html
index 8709499..f078ed5 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -7,13 +7,15 @@
 <link rel="stylesheet" href="/static/coloris.min.css"/>
 <script src="/static/coloris.min.js"></script>
 
-<style>
-:root {
-    {% if user_bgcolor %} --yellow: {{ user_bgcolor }} !important; {% endif %}
-    {% if user_fgcolor %} --black:  {{ user_fgcolor }} !important; {% endif %}
-    {% if user_accolor %} --purple: {{ user_accolor }} !important; {% endif %}
-}
-</style>
+<script>
+    // Apply user colors
+    document.addEventListener("DOMContentLoaded", (event) => {
+        var rootStyle = document.documentElement.style;
+        {% if user_bgcolor %} rootStyle.setProperty('--yellow', "{{ user_bgcolor }}"); {% endif %}
+        {% if user_fgcolor %} rootStyle.setProperty('--black', "{{ user_fgcolor }}"); {% endif %}
+        {% if user_accolor %} rootStyle.setProperty('--purple', "{{ user_accolor }}"); {% endif %}
+    });
+</script>
 
 {% endblock %}