From e1dfd2ea0767ac7327244961c920031a8291c249 Mon Sep 17 00:00:00 2001
From: welpo <welpo@users.noreply.github.com>
Date: Tue, 25 Jul 2023 00:40:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20properly=20initialise=20`?=
 =?UTF-8?q?currentTheme`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `currentTheme` variable is now properly initialized when setting
the initial theme, which fixes the "extra click" issue observed when system preference
is `dark` and there's no saved theme in localStorage.

Also minifies the themeSwitcher.

Fixes #94
---
 static/js/themeSwitcher.js     | 26 +++++++++++++----------
 static/js/themeSwitcher.min.js | 38 +---------------------------------
 2 files changed, 16 insertions(+), 48 deletions(-)

diff --git a/static/js/themeSwitcher.js b/static/js/themeSwitcher.js
index fb4accf..46a4406 100644
--- a/static/js/themeSwitcher.js
+++ b/static/js/themeSwitcher.js
@@ -1,33 +1,37 @@
 // Get the theme switcher button element.
 const themeSwitcher = document.querySelector(".theme-switcher");
 
-// Retrieve theme from localStorage.
-let currentTheme = localStorage.getItem("theme");
+// Retrieve theme from either the localStorage or the data-theme attribute on the document element.
+let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');
 
-// Function to switch between dark and light themes.
-function setTheme(theme) {
+// Function to set theme
+function setTheme(theme, saveToLocalStorage = false) {
     document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
+    currentTheme = theme;
+
+    if (saveToLocalStorage) {
+        localStorage.setItem("theme", theme);
+    }
 
-    // Dispatch a custom event for comment systems.
+    // Dispatch a custom event for utterances and giscus.
     const event = new CustomEvent("themeChanged", {
         detail: { theme: theme }
     });
     window.dispatchEvent(event);
 }
 
+// Function to switch between dark and light themes.
 function switchTheme() {
     // Set the new theme based on the current theme.
     const newTheme = currentTheme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
+    setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
 }
 
+// Initialize the theme switcher button.
 themeSwitcher.addEventListener("click", switchTheme, false);
 
 // Update the theme based on system preference if the user hasn't manually changed the theme.
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-    if (!localStorage.getItem("theme")) {
-        const newTheme = e.matches ? "dark" : "light";
-        setTheme(newTheme);
-    }
+    const newTheme = e.matches ? "dark" : "light";
+    setTheme(newTheme);
 });
diff --git a/static/js/themeSwitcher.min.js b/static/js/themeSwitcher.min.js
index bd58b9d..d700269 100644
--- a/static/js/themeSwitcher.min.js
+++ b/static/js/themeSwitcher.min.js
@@ -1,37 +1 @@
-// Get the theme switcher button element.
-const themeSwitcher = document.querySelector(".theme-switcher");
-
-// Retrieve theme from localStorage.
-let currentTheme = localStorage.getItem("theme");
-
-// Function to set theme
-function setTheme(theme, saveToLocalStorage = false) {
-    document.documentElement.setAttribute("data-theme", theme);
-    currentTheme = theme;
-
-    if (saveToLocalStorage) {
-        localStorage.setItem("theme", theme);
-    }
-
-    // Dispatch a custom event for utterances and giscus.
-    const event = new CustomEvent("themeChanged", {
-        detail: { theme: theme }
-    });
-    window.dispatchEvent(event);
-}
-
-// Function to switch between dark and light themes.
-function switchTheme() {
-    // Set the new theme based on the current theme.
-    const newTheme = currentTheme === "dark" ? "light" : "dark";
-    setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
-}
-
-// Initialize the theme switcher button.
-themeSwitcher.addEventListener("click", switchTheme, false);
-
-// Update the theme based on system preference if the user hasn't manually changed the theme.
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-    const newTheme = e.matches ? "dark" : "light";
-    setTheme(newTheme);
-});
+const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")});