Fix colour system

static/js/settings.js

@@ -1,6 +1,7 @@
 document.addEventListener('DOMContentLoaded', function() {
     const primaryColorInput = document.getElementById('primaryColor');
     const secondaryColorInput = document.getElementById('secondaryColor');
+    const colorSettingsForm = document.getElementById('colorSettingsForm');
 
     // Tab persistence
     const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
@@ -163,15 +164,37 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Initialize colors from database values
     function initializeColors() {
-        // Reset inputs to original database values
-        primaryColorInput.value = primaryColorInput.dataset.originalValue;
-        secondaryColorInput.value = secondaryColorInput.dataset.originalValue;
+        // Get the current computed CSS variable values
+        const computedPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim();
+        const computedSecondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim();
+
+        console.log('[Settings] Initializing colors:', {
+            primary: computedPrimaryColor,
+            secondary: computedSecondaryColor,
+            timestamp: new Date().toISOString()
+        });
+
+        // Update input values
+        primaryColorInput.value = computedPrimaryColor;
+        secondaryColorInput.value = computedSecondaryColor;
 
         // Update all color previews
-        updateAllColors(primaryColorInput.value, true);
-        updateAllColors(secondaryColorInput.value, false);
+        updateAllColors(computedPrimaryColor, true);
+        updateAllColors(computedSecondaryColor, false);
     }
 
     // Initialize colors when the page loads
     initializeColors();
+
+    // Handle form submission
+    if (colorSettingsForm) {
+        colorSettingsForm.addEventListener('submit', function(e) {
+            console.log('[Settings] Form submitted with values:', {
+                primary: primaryColorInput.value,
+                secondary: secondaryColorInput.value,
+                csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+                timestamp: new Date().toISOString()
+            });
+        });
+    }
 });