diff --git a/css/index.css b/css/index.css
index 7d14c5c..884a3d0 100644
--- a/css/index.css
+++ b/css/index.css
@@ -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;
+}
diff --git a/static/js/custom.js b/static/js/custom.js
index 2fab55a..cc1edf8 100644
--- a/static/js/custom.js
+++ b/static/js/custom.js
@@ -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");
+ });
+ }
};
diff --git a/templates/partials/head.html b/templates/partials/head.html
index 9f32976..da1cb36 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -5,6 +5,18 @@
{% set zolaVer = '0.13.0' %}
+
{% block title %}
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 952bace..d627eae 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -58,6 +58,10 @@
{% endfor %}
+
+
@@ -116,8 +120,11 @@
-
{% endfor %}
+
+
diff --git a/templates/partials/header_custom.html b/templates/partials/header_custom.html
index b028733..0ddc25e 100644
--- a/templates/partials/header_custom.html
+++ b/templates/partials/header_custom.html
@@ -30,7 +30,7 @@
-