From 9d1ac829f8c02704ba0786222b781e64add4b829 Mon Sep 17 00:00:00 2001
From: tfmukles <mukles.themefisher@gmail.com>
Date: Wed, 18 Oct 2023 00:08:16 +0600
Subject: [PATCH 1/2] refactor dark mode issue

---
 src/layouts/components/ThemeSwitcher.astro | 49 ++++++++++++----------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/layouts/components/ThemeSwitcher.astro b/src/layouts/components/ThemeSwitcher.astro
index 04266a3..abec76d 100755
--- a/src/layouts/components/ThemeSwitcher.astro
+++ b/src/layouts/components/ThemeSwitcher.astro
@@ -44,30 +44,33 @@ const { className }: { className?: string } = Astro.props;
   )
 }
 
-<script is:inline define:vars={{ defaultTheme: default_theme }}>
-  var darkMode = defaultTheme === "dark" ? true : false;
-  var themeSwitch = document.querySelectorAll("[data-theme-switcher]");
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-    darkMode = true;
+<script>
+  function toggleTheme(themeSwitch: NodeListOf<Element>) {
+    const currentTheme = localStorage.getItem("theme");
+    const isDarkTheme = currentTheme === "dark";
+
+    themeSwitch.forEach((sw: any) => (sw.checked = isDarkTheme));
+    document.documentElement.classList.toggle("dark", isDarkTheme);
   }
-  if (localStorage.getItem("theme") === "dark") {
-    darkMode = true;
-  } else if (localStorage.getItem("theme") === "light") {
-    darkMode = false;
-  }
-  if (darkMode) {
-    document.documentElement.classList.toggle("dark");
-  }
-  document.addEventListener("DOMContentLoaded", () => {
-    [].forEach.call(themeSwitch, function (ts) {
-      ts.checked = darkMode ? true : false;
-      ts.addEventListener("click", () => {
-        document.documentElement.classList.toggle("dark");
-        localStorage.setItem(
-          "theme",
-          document.documentElement.classList.contains("dark") ? "dark" : "light"
-        );
+
+  const setDarkMode = () => {
+    const themeSwitch = document.querySelectorAll("[data-theme-switcher]");
+
+    toggleTheme(themeSwitch);
+
+    themeSwitch.forEach((sw) => {
+      sw.addEventListener("click", function () {
+        const currentTheme = localStorage.getItem("theme");
+        const newTheme = currentTheme === "dark" ? "light" : "dark";
+
+        localStorage.setItem("theme", newTheme);
+        toggleTheme(themeSwitch);
       });
     });
-  });
+  };
+
+  // Runs on initial navigation
+  setDarkMode();
+  // Runs on view transitions navigation
+  document.addEventListener("astro:after-swap", setDarkMode);
 </script>

From cff66f7478796d363099c4c62f13f7a5baedbdf5 Mon Sep 17 00:00:00 2001
From: TF Mukles <tfmukles@Sojon.local>
Date: Wed, 18 Oct 2023 10:19:56 +0600
Subject: [PATCH 2/2] refactor toggle theme

---
 src/layouts/Base.astro                     |  4 ++++
 src/layouts/components/ThemeSwitcher.astro | 19 +++++++++++--------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 20ad564..f0f7fe8 100755
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -6,6 +6,8 @@ import { plainify } from "@/lib/utils/textConverter";
 import Footer from "@/partials/Footer.astro";
 import Header from "@/partials/Header.astro";
 import "@/styles/main.scss";
+import { ViewTransitions } from 'astro:transitions';
+
 
 // font families
 const pf = theme.fonts.font_family.primary;
@@ -82,6 +84,8 @@ const { title, meta_title, description, image, noindex, canonical } =
       )}
     />
 
+    <ViewTransitions />
+
     <!-- author from config.json -->
     <meta name="author" content={config.metadata.meta_author} />
 
diff --git a/src/layouts/components/ThemeSwitcher.astro b/src/layouts/components/ThemeSwitcher.astro
index abec76d..4850bff 100755
--- a/src/layouts/components/ThemeSwitcher.astro
+++ b/src/layouts/components/ThemeSwitcher.astro
@@ -45,24 +45,27 @@ const { className }: { className?: string } = Astro.props;
 }
 
 <script>
-  function toggleTheme(themeSwitch: NodeListOf<Element>) {
-    const currentTheme = localStorage.getItem("theme");
-    const isDarkTheme = currentTheme === "dark";
+  import { settings } from "@/config/config.json";
+  const matchMedia = window.matchMedia("(prefers-color-scheme: dark)");
+  
+  matchMedia.addEventListener('change', () => toggleTheme(document.querySelectorAll("[data-theme-switcher]")));
 
+  function toggleTheme(themeSwitch: NodeListOf<Element>) {
+    const defaulTheme =  settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
+    const currentTheme = localStorage.getItem("theme") || defaulTheme;
+    const isDarkTheme = currentTheme === "dark";
     themeSwitch.forEach((sw: any) => (sw.checked = isDarkTheme));
     document.documentElement.classList.toggle("dark", isDarkTheme);
   }
 
   const setDarkMode = () => {
     const themeSwitch = document.querySelectorAll("[data-theme-switcher]");
-
     toggleTheme(themeSwitch);
-
     themeSwitch.forEach((sw) => {
       sw.addEventListener("click", function () {
-        const currentTheme = localStorage.getItem("theme");
-        const newTheme = currentTheme === "dark" ? "light" : "dark";
-
+        const defaulTheme =  settings.default_theme ==="system" ? matchMedia.matches ? "dark" : "light" : settings.default_theme;
+        const currentTheme = localStorage.getItem("theme") || defaulTheme;
+        const newTheme = currentTheme === "light" ? "dark" : "light";
         localStorage.setItem("theme", newTheme);
         toggleTheme(themeSwitch);
       });