From 0fe58387a31347d723c2b720d5f53465b42ab98e Mon Sep 17 00:00:00 2001
From: Chris W <cawatson1993@gmail.com>
Date: Fri, 8 Dec 2023 20:37:42 -0700
Subject: [PATCH] add system theme to toggle

---
 src/components/ThemeToggle.astro | 69 ++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 2b02d78..9d8171f 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -5,44 +5,51 @@ import { Icon } from 'astro-icon/components';
 <button id="themeToggle">
     <Icon name="mdi:weather-sunny" class="sun w-8 h-8 text-gray-800" />
     <Icon name="mdi:weather-night" class="moon w-8 h-8 text-gray-100" />
+    <Icon name="mdi:weather-partly-cloudy" class="system w-8 h-8 text-gray-500" />
 </button>
 
 <style>
-    #themeToggle .sun {
-        @apply dark:hidden;
-    }
-
-    #themeToggle .moon {
-        @apply hidden dark:block;
+    .sun, .moon, .system {
+        display: none;
     }
 </style>
 
 <script is:inline>
-const theme = (() => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-    return localStorage.getItem('theme');
+    document.addEventListener('DOMContentLoaded', () => {
+        const themeToggle = document.getElementById('themeToggle');
+        const currentTheme = localStorage.getItem('theme') || 'system';
+
+        // Apply the saved theme
+        setTheme(currentTheme);
+
+        themeToggle.addEventListener('click', toggleTheme);
+    });
+
+    function toggleTheme() {
+        const currentTheme = localStorage.getItem('theme');
+        const newTheme = currentTheme === 'dark' ? 'light' : currentTheme === 'light' ? 'system' : 'dark';
+
+        setTheme(newTheme);
+        localStorage.setItem('theme', newTheme);
     }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    return 'dark';
+
+    function setTheme(theme) {
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark');
+        } else if (theme === 'light') {
+            document.documentElement.classList.remove('dark');
+        } else if (theme === 'system') {
+            const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+            document.documentElement.classList.toggle('dark', systemTheme === 'dark');
+        }
+
+        // Adjusting icons visibility
+        const sunIcon = document.querySelector('.sun');
+        const moonIcon = document.querySelector('.moon');
+        const systemIcon = document.querySelector('.system');
+
+        sunIcon.style.display = theme === 'light' ? 'block' : 'none';
+        moonIcon.style.display = theme === 'dark' ? 'block' : 'none';
+        systemIcon.style.display = theme === 'system' ? 'block' : 'none';
     }
-    return 'light';
-})();
-
-if (theme === 'light') {
-    document.documentElement.classList.remove('dark');
-} else {
-    document.documentElement.classList.add('dark');
-}
-
-window.localStorage.setItem('theme', theme);
-
-const handleToggleClick = () => {
-    const element = document.documentElement;
-    element.classList.toggle("dark");
-
-    const isDark = element.classList.contains("dark");
-    localStorage.setItem("theme", isDark ? "dark" : "light");
-}
-
-document.getElementById("themeToggle").addEventListener("click", handleToggleClick);
 </script>
\ No newline at end of file