Refactor ThemeButton and ThemeMenu to set icon theme based on system …

…preference
madalinpopa · Sep 29, 2024 · ce0ded9 · ce0ded9
1 parent 1fd7ab3
commit ce0ded9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/components/buttons/ThemeButton.astro b/src/components/buttons/ThemeButton.astro
@@ -7,13 +7,15 @@ 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"
     />
     <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
@@ -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");