ourworld_web/www_zola_template
20
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
Show Stats 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");
});
}
});
};

26
templates/partials/header.html
View File

@ -18,9 +18,16 @@
<div class="mr-2 -my-2 lg:hidden flex justify-center items-center">
<!-- Dark/Light mode toggle button -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="mr-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-gray-400 hover:bg-gray-700 transition duration-150 ease-in-out">
<span id="theme-toggle-icon">🌙</span>
</button>
<button type="button" class="theme-toggle-btn text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2">
<!-- Sun icon (light mode) -->
<svg class="theme-toggle-light-icon hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<!-- Moon icon (dark mode) -->
<svg class="theme-toggle-dark-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
<button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-50 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
<!-- Heroicon name: menu -->
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@ -67,9 +74,16 @@
{% endfor %}
<!-- Dark/Light mode toggle button -->
<button id="theme-toggle" aria-label="Toggle dark mode" class="ml-4 p-2 rounded focus:outline-none border border-white bg-gray-800 text-yellow-300 hover:bg-gray-700 transition duration-150 ease-in-out">
<span id="theme-toggle-icon">🌙</span>
</button>
<button type="button" class="theme-toggle-btn text-gray-300 hover:bg-gray-700 hover:text-white p-2 rounded-md ml-2 focus:outline-none">
<!-- Sun icon (light mode) -->
<svg class="theme-toggle-light-icon hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
<!-- Moon icon (dark mode) -->
<svg class="theme-toggle-dark-icon w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
</button>
</nav>