Refactor ThemeMenu to set icon theme based on system preference

madalinpopa · Sep 29, 2024 · eec73c4 · eec73c4
1 parent 39599ca
commit eec73c4
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git 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
@@ -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 />