frontend/theme-fix.js

// 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)
    }
  }