Upload theme-fix.js

frontend/theme-fix.js

@@ -0,0 +1,118 @@
+// This is a standalone script to fix theme issues
+// Add this script to your HTML before the closing body tag
+
+document.addEventListener("DOMContentLoaded", () => {
+    console.log("Theme fix script loaded")
+  
+    // Fix theme toggle button
+    const themeToggle = document.getElementById("theme-toggle")
+    if (themeToggle) {
+      // Remove any existing event listeners by cloning and replacing
+      const newThemeToggle = themeToggle.cloneNode(true)
+      themeToggle.parentNode.replaceChild(newThemeToggle, themeToggle)
+  
+      // Add event listener to the new button
+      newThemeToggle.addEventListener("click", () => {
+        console.log("Theme toggle clicked")
+        toggleTheme()
+      })
+    }
+  
+    // Make sure theme is initialized
+    initTheme()
+  
+    // Global theme toggle function
+    window.toggleTheme = () => {
+      console.log("Toggle theme called")
+  
+      // Toggle dark class
+      document.documentElement.classList.toggle("dark")
+  
+      // Update icons
+      const sunIcon = document.getElementById("sun-icon")
+      const moonIcon = document.getElementById("moon-icon")
+  
+      if (document.documentElement.classList.contains("dark")) {
+        // Dark mode active
+        if (sunIcon) sunIcon.classList.remove("hidden")
+        if (moonIcon) moonIcon.classList.add("hidden")
+        localStorage.setItem("theme", "dark")
+        console.log("Dark mode activated")
+      } else {
+        // Light mode active
+        if (sunIcon) sunIcon.classList.add("hidden")
+        if (moonIcon) moonIcon.classList.remove("hidden")
+        localStorage.setItem("theme", "light")
+        console.log("Light mode activated")
+      }
+  
+      // Show notification
+      const message = document.documentElement.classList.contains("dark") ? "Dark mode activated" : "Light mode activated"
+  
+      showNotification(message)
+    }
+  
+    // Global init theme function
+    window.initTheme = () => {
+      const savedTheme = localStorage.getItem("theme")
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+  
+      console.log("Init theme - Saved theme:", savedTheme, "System prefers dark:", prefersDark)
+  
+      if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
+        document.documentElement.classList.add("dark")
+        const sunIcon = document.getElementById("sun-icon")
+        const moonIcon = document.getElementById("moon-icon")
+        if (sunIcon) sunIcon.classList.remove("hidden")
+        if (moonIcon) moonIcon.classList.add("hidden")
+      } else {
+        document.documentElement.classList.remove("dark")
+        const sunIcon = document.getElementById("sun-icon")
+        const moonIcon = document.getElementById("moon-icon")
+        if (sunIcon) sunIcon.classList.add("hidden")
+        if (moonIcon) moonIcon.classList.remove("hidden")
+      }
+    }
+  })
+  
+  // Ensure notification function is available
+  if (typeof showNotification !== "function") {
+    window.showNotification = (message, type = "success") => {
+      console.log("Notification:", message, type)
+  
+      // Create notification element
+      const notification = document.createElement("div")
+  
+      // Set class based on notification type
+      if (type === "success") {
+        notification.className =
+          "notification fixed top-4 right-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-md dark:bg-green-900 dark:text-green-100 dark:border-green-400"
+      } else if (type === "error") {
+        notification.className =
+          "notification fixed top-4 right-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-md dark:bg-red-900 dark:text-red-100 dark:border-red-400"
+      } else if (type === "warning") {
+        notification.className =
+          "notification fixed top-4 right-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-md dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-400"
+      } else if (type === "info") {
+        notification.className =
+          "notification fixed top-4 right-4 bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded shadow-md dark:bg-blue-900 dark:text-blue-100 dark:border-blue-400"
+      }
+  
+      notification.innerHTML = message
+  
+      // Add to document
+      document.body.appendChild(notification)
+  
+      // Remove after 3 seconds
+      setTimeout(() => {
+        notification.style.opacity = "0"
+        notification.style.transform = "translateY(-20px)"
+        notification.style.transition = "opacity 0.5s, transform 0.5s"
+  
+        setTimeout(() => {
+          notification.remove()
+        }, 500)
+      }, 3000)
+    }
+  }
+