fix: theme selection (fixes #54)

not-matthias · Apr 23, 2024 · 0e42f2a · 0e42f2a
1 parent e3bf98c
commit 0e42f2a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 22 deletions.
diff --git a/config.toml b/config.toml
@@ -15,7 +15,7 @@ highlight_theme = "ayu-dark"
 toc = true
 use_cdn = false
 favicon = "/icon/favicon.png"
-theme = "toggle" # light, dark, auto, toggle
+theme = "toggle"              # light, dark, auto, toggle
 comment = false
 # mathjax = true
 # mathjax_dollar_inline_enable = true
@@ -39,7 +39,7 @@ enabled = false
 
 [extra.analytics.goatcounter]
 user = "your_user"
-host = "example.com"    # default= goatcounter.com
+host = "example.com" # default= goatcounter.com
 
 [extra.analytics.umami]
 website_id = "43929cd1-1e83...."

diff --git a/static/js/themetoggle.js b/static/js/themetoggle.js
@@ -1,29 +1,42 @@
 function setTheme(mode) {
     localStorage.setItem("theme-storage", mode);
-    let htmlElement = document.querySelector("html");
-
-    if (mode === "dark") {
-        document.getElementById("darkModeStyle").disabled = false;
-        htmlElement.classList.remove("light")
-        htmlElement.classList.add("dark")
-
-        document.getElementById("sun-icon").style.display = "inline-block";
-        document.getElementById("moon-icon").style.display = "none";
-    } else if (mode === "light") {
-        document.getElementById("darkModeStyle").disabled = true;
-        htmlElement.classList.remove("dark")
-        htmlElement.classList.add("light")
-
-        document.getElementById("sun-icon").style.display = "none";
-        document.getElementById("moon-icon").style.display = "inline-block";
-    }
 }
 
+// Functions needed for the theme toggle
+// 
+
 function toggleTheme() {
     if (localStorage.getItem("theme-storage") === "light") {
         setTheme("dark");
+        updateItemToggleTheme();
     } else if (localStorage.getItem("theme-storage") === "dark") {
         setTheme("light");
+        updateItemToggleTheme();
+    }
+}
+
+function updateItemToggleTheme() {
+    let mode = getSavedTheme();
+
+    const darkModeStyle = document.getElementById("darkModeStyle");
+    if (darkModeStyle) {
+        darkModeStyle.disabled = (mode === "light");
+    }
+
+    const sunIcon = document.getElementById("sun-icon");
+    const moonIcon = document.getElementById("moon-icon");
+    if (sunIcon && moonIcon) {
+        sunIcon.style.display = (mode === "dark") ? "inline-block" : "none";
+        moonIcon.style.display = (mode === "light") ? "inline-block" : "none";
+    }
+
+    let htmlElement = document.querySelector("html");
+    if (mode === "dark") {
+        htmlElement.classList.remove("light")
+        htmlElement.classList.add("dark")
+    } else if (mode === "light") {
+        htmlElement.classList.remove("dark")
+        htmlElement.classList.add("light")
     }
 }
 
@@ -40,4 +53,5 @@ function getSavedTheme() {
     return currentTheme;
 }
 
-setTheme(getSavedTheme());
+// Update the toggle theme on page load
+updateItemToggleTheme();
diff --git a/templates/partials/header.html b/templates/partials/header.html
@@ -129,7 +129,7 @@
 
     {% set theme = config.extra.theme %}
     {% if theme == "dark" %}
-        <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/dark.css") }} />
+        <link rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" />
     {% elif theme == "light" %}
         <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
     {% elif theme == "auto" %}
@@ -139,6 +139,24 @@
         <link rel="stylesheet" type="text/css" href={{ get_url(path="theme/light.css") }} />
         <link id="darkModeStyle" rel="stylesheet" type="text/css" href="{{ get_url(path='theme/dark.css') }}" />
     {% endif %}
+
+    <!-- Set the correct theme in the script -->
+    <script src={{ get_url(path="js/themetoggle.js") }}></script>
+    {% if theme == "dark" %}
+        <script>setTheme("dark");</script>
+    {% elif theme == "light" %}
+        <script>setTheme("light");</script>
+    {% elif theme == "auto" %}
+        <script>
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                setTheme("dark");
+            } else {
+                setTheme("light");
+            }
+        </script>
+    {% else %}
+        <script>setTheme(getSavedTheme());</script>
+    {% endif %}
 
     <link rel="stylesheet" type="text/css" media="screen" href={{ get_url(path="main.css") }} />
 

diff --git a/templates/partials/nav.html b/templates/partials/nav.html
@@ -21,7 +21,9 @@
             <img src={{ get_url(path="feather/sun.svg") }} id="sun-icon" style="filter: invert(1);" alt="Light" />
             <img src={{ get_url(path="feather/moon.svg") }} id="moon-icon" alt="Dark" />
         </a>
-        <script src={{ get_url(path="js/themetoggle.js") }}></script>
+
+        <!-- Inititialize the theme toggle icons -->
+        <script>updateItemToggleTheme()</script>
         {% endif %}
     </nav>
 </header>