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] 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);
       });