update dark and light mode
This commit is contained in:
parent
01b2327dc0
commit
b2a1660aa3
@ -106,3 +106,26 @@ header { font-family: "Reddit Sans"; }
|
||||
@media (max-width: 768px) { /* h2 { font-size: 4rem; } */ .flex-col-reverse { flex-direction: column-reverse; } }
|
||||
@media (max-width: 640px) { .banner h2 { font: 600 7vw/10vw; } .header h1 { font-size: 20px; } .banner h2 svg { font-size: 30px; } }
|
||||
@media (max-width: 480px) { .banner, .header { padding: 80px 0; } footer { text-align: center; } /* h2 { font-size: 3rem; } */ }
|
||||
|
||||
:root {
|
||||
--color-bg: #fff;
|
||||
--color-text: #222;
|
||||
--color-link: #8885e2;
|
||||
--color-header: #000;
|
||||
}
|
||||
.dark {
|
||||
--color-bg: #18181b;
|
||||
--color-text: #f3f4f6;
|
||||
--color-link: #a5b4fc;
|
||||
--color-header: #18181b;
|
||||
}
|
||||
body {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
a, a:visited {
|
||||
color: var(--color-link);
|
||||
}
|
||||
header, .header, .banner {
|
||||
background: var(--color-header) !important;
|
||||
}
|
||||
|
||||
@ -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");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user