From ce0ded9d450bf264d52937ceda8b7a843f5cd149 Mon Sep 17 00:00:00 2001
From: Madalin Popa <contact@madalinpopa.com>
Date: Sun, 29 Sep 2024 15:53:48 +0300
Subject: [PATCH] Refactor ThemeButton and ThemeMenu to set icon theme based on
 system preference

---
 src/components/buttons/ThemeButton.astro  |  2 ++
 src/components/navigation/ThemeMenu.astro | 10 ++++++++++
 2 files changed, 12 insertions(+)

diff --git a/src/components/buttons/ThemeButton.astro b/src/components/buttons/ThemeButton.astro
index 569ce65..e05c5ed 100644
--- a/src/components/buttons/ThemeButton.astro
+++ b/src/components/buttons/ThemeButton.astro
@@ -7,6 +7,7 @@ import { Icon } from "astro-icon/components";
     <Icon
       name="sun"
       x-cloak
+      x-init="setIconTheme;"
       x-show="theme === 'dark'"
       class="text-xl hover:text-gray-500 dark:hover:text-gray-400"
       id="sun-icon"
@@ -14,6 +15,7 @@ import { Icon } from "astro-icon/components";
     <Icon
       x-cloak
       x-show="theme === 'light'"
+      x-init="setIconTheme;"
       name="moon"
       class="text-xl hover:text-gray-500 dark:hover:text-gray-400"
       id="moon-icon"
diff --git a/src/components/navigation/ThemeMenu.astro b/src/components/navigation/ThemeMenu.astro
index 86dda77..fd09879 100644
--- a/src/components/navigation/ThemeMenu.astro
+++ b/src/components/navigation/ThemeMenu.astro
@@ -65,6 +65,16 @@ import { Icon } from "astro-icon/components";
       theme: localStorage.theme || "system",
       showThemeMenu: false,
 
+      setIconTheme() {
+        if (this.theme === "system") {
+          if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            this.theme = "dark";
+          } else {
+            this.theme = "light";
+          }
+        }
+      },
+
       setTheme(newTheme) {
         if (newTheme === "light") {
           document.documentElement.classList.remove("dark");