ourworld_web/www_zola_template
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update toogle

Browse Source
This commit is contained in:
Ehab Hassan
2025-08-11 11:13:49 +03:00
parent dc0183b8cb
commit c01c90d4ce
2 changed files with 45 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
static/js/custom.js
View File

@@ -109,18 +109,32 @@ window.onload = function () {
?.addEventListener("click", toggleMenu);
// Theme toggle logic
function updateThemeIcons() {
const isDark = document.documentElement.classList.contains("dark");
const toggles = document.querySelectorAll(".theme-toggle-btn");
toggles.forEach((btn) => {
const lightIcon = btn.querySelector(".theme-toggle-light-icon");
const darkIcon = btn.querySelector(".theme-toggle-dark-icon");
if (!lightIcon || !darkIcon) return;
if (isDark) {
lightIcon.classList.add("hidden");
darkIcon.classList.remove("hidden");
} else {
lightIcon.classList.remove("hidden");
darkIcon.classList.add("hidden");
}
});
}
function setTheme(theme) {
if (theme === "dark") {
document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark");
if (document.getElementById("theme-toggle-icon")) document.getElementById("theme-toggle-icon").textContent = "🌙";
if (document.getElementById("theme-toggle-icon-mobile")) document.getElementById("theme-toggle-icon-mobile").textContent = "🌙";
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
if (document.getElementById("theme-toggle-icon")) document.getElementById("theme-toggle-icon").textContent = "☀️";
if (document.getElementById("theme-toggle-icon-mobile")) document.getElementById("theme-toggle-icon-mobile").textContent = "☀️";
}
updateThemeIcons();
}
// Initial theme
@@ -133,17 +147,12 @@ window.onload = function () {
setTheme("light");
}
// Toggle event listeners
const themeToggle = document.getElementById("theme-toggle");
if (themeToggle) {
themeToggle.addEventListener("click", function () {
setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
// Toggle event listeners (support multiple buttons)
const themeToggleButtons = document.querySelectorAll(".theme-toggle-btn");
themeToggleButtons.forEach((btn) => {
btn.addEventListener("click", function () {
const isDark = document.documentElement.classList.contains("dark");
setTheme(isDark ? "light" : "dark");
});
}
const themeToggleMobile = document.getElementById("theme-toggle-mobile");
if (themeToggleMobile) {
themeToggleMobile.addEventListener("click", function () {
setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
});
}
});
};