From 4afe2010b03f19dd2cd6f49d0432592c2233fab9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Jab=C5=82o=C5=84ski?= <github.com@mtsz.pl>
Date: Fri, 17 Oct 2025 22:30:25 +0200
Subject: [PATCH] add "auto" state for toggle

---
 static/icons/auto.svg       |  4 ++++
 static/js/themetoggle.js    | 44 +++++++++++++++++++++++++++----------
 templates/partials/nav.html | 12 ++++++----
 3 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 static/icons/auto.svg

diff --git a/static/icons/auto.svg b/static/icons/auto.svg
new file mode 100644
index 00000000..9744b066
--- /dev/null
+++ b/static/icons/auto.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <circle cx="12" cy="12" r="10"/>
+  <path d="M12 2a10 10 0 0 0 0 20" fill="currentColor"/>
+</svg>
diff --git a/static/js/themetoggle.js b/static/js/themetoggle.js
index a297bd72..5c4b12be 100644
--- a/static/js/themetoggle.js
+++ b/static/js/themetoggle.js
@@ -10,6 +10,9 @@ function toggleTheme() {
         setTheme("dark");
         updateItemToggleTheme();
     } else if (localStorage.getItem("theme-storage") === "dark") {
+        setTheme("auto");
+        updateItemToggleTheme();
+    } else {
         setTheme("light");
         updateItemToggleTheme();
     }
@@ -20,34 +23,44 @@ function updateItemToggleTheme() {
 
     const darkModeStyle = document.getElementById("darkModeStyle");
     if (darkModeStyle) {
-        darkModeStyle.disabled = (mode === "light");
+        if (mode === "dark" || (mode === "auto" && getSystemPrefersDark())) {
+            darkModeStyle.disabled = false;
+        } else {
+            darkModeStyle.disabled = true;
+        }
     }
 
     const sunIcon = document.getElementById("sun-icon");
     const moonIcon = document.getElementById("moon-icon");
-    if (sunIcon && moonIcon) {
-        sunIcon.style.display = (mode === "dark") ? "block" : "none";
-        moonIcon.style.display = (mode === "light") ? "block" : "none";
+    const autoIcon = document.getElementById("auto-icon");
+    if (sunIcon && moonIcon && autoIcon) {
+        sunIcon.style.display = (mode === "light") ? "block" : "none";
+        moonIcon.style.display = (mode === "dark") ? "block" : "none";
+        autoIcon.style.display = (mode === "auto") ? "block" : "none";
+        
+        if (mode === "auto") {
+            autoIcon.style.filter = getSystemPrefersDark() ? "invert(1)" : "invert(0)";
+        }
     }
 
     let htmlElement = document.querySelector("html");
-    if (mode === "dark") {
+    if (mode === "dark" || (mode === "auto" && getSystemPrefersDark())) {
         htmlElement.classList.remove("light")
         htmlElement.classList.add("dark")
-    } else if (mode === "light") {
+    } else {
         htmlElement.classList.remove("dark")
         htmlElement.classList.add("light")
     }
 }
 
+function getSystemPrefersDark() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
 function getSavedTheme() {
     let currentTheme = localStorage.getItem("theme-storage");
     if(!currentTheme) {
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            currentTheme = "dark";
-        } else {
-            currentTheme = "light";
-        }
+        currentTheme = getSystemPrefersDark() ? "dark" : "light";
     }
 
     return currentTheme;
@@ -55,3 +68,12 @@ function getSavedTheme() {
 
 // Update the toggle theme on page load
 updateItemToggleTheme();
+
+// Listen for system theme changes in auto mode
+if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
+        if (getSavedTheme() === "auto") {
+            updateItemToggleTheme();
+        }
+    });
+}
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index 1248255f..69df6dd7 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -77,11 +77,15 @@ <h1 id="modalTitle" class="page-header">
             <a id="dark-mode-toggle"
                onclick="toggleTheme(); event.preventDefault();"
                href="#">
-                <img src="{{ get_url(path='icons/sun.svg') }}"
-                     id="sun-icon"
+                <img src="{{ get_url(path='icons/sun.svg') }}" id="sun-icon" alt="Light" />
+                <img src="{{ get_url(path='icons/moon.svg') }}"
+                     id="moon-icon"
                      style="filter: invert(1)"
-                     alt="Light" />
-                <img src={{ get_url(path="icons/moon.svg") }} id="moon-icon" alt="Dark" />
+                     alt="Dark" />
+                <img src="{{ get_url(path='icons/auto.svg') }}"
+                     id="auto-icon"
+                     style="filter: invert(1)"
+                     alt="Auto" />
             </a>
 
             <!-- Initialize the theme toggle icons -->