Spaces:
Sleeping
Sleeping
File size: 4,775 Bytes
3bfa069 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 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)
}
}
|