From eec73c44c68b8b1e7cc6ea47f66a15abfd7fde9b Mon Sep 17 00:00:00 2001
From: Madalin Popa <contact@madalinpopa.com>
Date: Sun, 29 Sep 2024 16:40:39 +0300
Subject: [PATCH] Refactor ThemeMenu to set icon theme based on system
 preference

---
 src/components/navigation/ThemeMenu.astro |  4 +--
 src/layouts/BaseLayout.astro              | 34 +++++++++++++++--------
 2 files changed, 25 insertions(+), 13 deletions(-)
diff --git a/src/components/navigation/ThemeMenu.astro b/src/components/navigation/ThemeMenu.astro
index 4b9a9f5..838b40b 100644
--- a/src/components/navigation/ThemeMenu.astro
+++ b/src/components/navigation/ThemeMenu.astro
@@ -3,7 +3,7 @@ import ThemeButton from "../buttons/ThemeButton.astro";
 import { Icon } from "astro-icon/components";
 ---
 
-<div x-data="themeSwitcher" class="relative inline-block text-left">
+<div  x-data="themeSwitcher" x-data="themeSwitcher" x-init="$watch('theme', () => setIconTheme() )" class="relative inline-block text-left">
   <div>
     <ThemeButton />
   </div>
@@ -45,7 +45,7 @@ import { Icon } from "astro-icon/components";
         Dark
       </button>
       <button
-        x-on:click="setTheme('system'); location.reload();"
+        x-on:click="setTheme('system');"
         class="flex gap-2 w-full items-center rounded-md px-4 py-2 text-sm hover:bg-gray-700 hover:text-white"
         role="menuitem"
         tabindex="-1"
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 9679462..367d4c6 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,9 +1,9 @@
 ---
 import "../styles/global.css";
-import { ViewTransitions } from 'astro:transitions';
+import { ViewTransitions } from "astro:transitions";
 ---
 
-<html lang="en" x-data>
+<html lang="en">
   <head>
     <meta charset="utf-8" />
 
@@ -73,16 +73,28 @@ import { ViewTransitions } from 'astro:transitions';
         }
       }
     </script>
-    <script is:inline data-astro-rerun>
-      if (
-        localStorage.theme === "dark" ||
-        (!("theme" in localStorage) &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches)
-      ) {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
+    <script is:inline>
+      function setSystemTheme() {
+        const theme =  localStorage.getItem("theme") || "system";
+
+        if (theme === "system" || !(theme in localStorage)) {
+          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            document.documentElement.classList.add("dark");
+          } else {
+            document.documentElement.classList.remove("dark");
+          }
+        }
       }
+
+      // Set the system theme on page load
+      setSystemTheme();
+
+      // Set the system theme when the page is loaded
+      document.addEventListener('astro:page-load', e => setSystemTheme());
+
+      // Set the system theme when the user changes the system theme
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setSystemTheme());
+
     </script>
     <title>Madalin Popa | DevOps Engineer</title>
     <ViewTransitions />
