add third "auto" toggle state, adjusting to browser settings

Author: mtsz-pl

static/icons/auto.svg

@@ -10,6 +10,9 @@ function toggleTheme() {
         setTheme("dark");
         updateItemToggleTheme();
     } else if (localStorage.getItem("theme-storage") === "dark") {
+        setTheme("auto");
+        updateItemToggleTheme();
+    } else {
         setTheme("light");
         updateItemToggleTheme();
     }
@@ -20,38 +23,57 @@ 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;
 }
 
 // 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();
+        }
+    });
+}

static/js/themetoggle.js

@@ -79,9 +79,15 @@ <h1 id="modalTitle" class="page-header">
                href="#">
                 <img src="{{ get_url(path='icons/sun.svg') }}"
                      id="sun-icon"
-                     style="filter: invert(1)"
                      alt="Light" />
-                <img src={{ get_url(path="icons/moon.svg") }} id="moon-icon" alt="Dark" />
+                <img src="{{ get_url(path='icons/moon.svg') }}"
+                     id="moon-icon"
+                     style="filter: invert(1)"
+                     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 -->