Fix colour system

static/css/auth.css

@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 body {
     background-color: var(--bg-color);
 }

static/css/base.css

@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 body {
     background-color: var(--bg-color);
 }

static/css/dashboard.css

@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 /* Masonry Layout */
 .masonry {
     column-count: 1;

static/css/home.css

@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 .navbar {
     background-color: var(--primary-color) !important;
 }

static/css/trash.css

@@ -1,6 +1,3 @@
-/* Import color variables */
-@import 'colors.css';
-
 .btn-group .btn.active {
     background-color: var(--primary-bg-light) !important;
     border-color: var(--primary-color) !important;

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()
+            });
+        });
+    }
 });