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

update dark and light mode

Browse Source
This commit is contained in:
Ehab Hassan
2025-08-06 12:31:49 +03:00
parent 01b2327dc0
commit b2a1660aa3
5 changed files with 89 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
static/js/custom.js
View File

@@ -107,4 +107,43 @@ window.onload = function () {
document
.getElementById("mobile-learn-btn")
?.addEventListener("click", toggleMenu);
// Theme toggle logic
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 = "☀️";
}
}
// Initial theme
const userTheme = localStorage.getItem("theme");
if (userTheme) {
setTheme(userTheme);
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
setTheme("dark");
} else {
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");
});
}
const themeToggleMobile = document.getElementById("theme-toggle-mobile");
if (themeToggleMobile) {
themeToggleMobile.addEventListener("click", function () {
setTheme(document.documentElement.classList.contains("dark") ? "light" : "dark");
});
}
};