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

12
templates/partials/head.html
View File

@@ -5,6 +5,18 @@
{% set zolaVer = '0.13.0' %}
<head>
<script>
(function() {
try {
var theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
} catch (e) {}
})();
</script>
<meta name="generator" content="Zola v.{{ zolaVer }} - getzola.org" />
<link rel="icon" type="image/x-icon" href="{{ get_url(path='images/favicon.png')}}">
{% block title %}

9
templates/partials/header.html
View File

@@ -58,6 +58,10 @@
</button>
</div>
{% 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>
</nav>
</div>
</div>
@@ -116,8 +120,11 @@
<div id="{{menu_id}}" class="z-50 leading-3 pl-12 pt-6 pb-4 inset-x-0 text-sm transform duration-200 ease-in opacity-0 -translate-y-1 hidden">
{{ subsection | safe }}
</div>
{% endfor %}
<!-- Dark/Light mode toggle button for mobile -->
<button id="theme-toggle-mobile" aria-label="Toggle dark mode" class="mt-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 self-center">
<span id="theme-toggle-icon-mobile">🌙</span>
</button>
</nav>
</div>

9
templates/partials/header_custom.html
View File

@@ -30,7 +30,7 @@
</button>
</div>
<div class="hidden lg:flex-1 lg:flex lg:items-center lg:justify-end lg:space-x-12">
<nav class="flex space-x-10">
<nav class="flex space-x-10 items-center">
{% for header_item in header_items %}
{% if not loop.first %}
@@ -56,10 +56,15 @@
<div class="-rotate-90 transition-transform"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg></div>
</button>
</div>
{% endif %}
{% endif %}
{% 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>
</nav>