From 2f52b381002e0828a25360b496260d991a59add0 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 23 Jan 2025 12:46:00 +0000
Subject: [PATCH] fix: theme toggle error

---
 src/components/ThemeToggle.astro | 14 +-------------
 src/layouts/Head.astro           | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 409a4b2..9e4289d 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,14 +1,12 @@
 <script>
   // Initialize theme toggle button
   const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
 
   // Core theme switching logic
   function switchTheme() {
     const isDark = document.documentElement.classList.toggle('dark')
     themeToggle.setAttribute('aria-pressed', String(isDark))
     localStorage.setItem('theme', isDark ? 'dark' : 'light')
-    document.dispatchEvent(new Event('theme-changed'))
   }
 
   // Handle theme toggle with view transitions API
@@ -20,18 +18,8 @@
     document.startViewTransition(switchTheme)
   }
 
-  // Sync theme state
-  function syncTheme() {
-    const theme = localStorage.getItem('theme')
-    document.documentElement.classList.toggle('dark', theme === 'dark')
-    themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
-  }
-
-  // Event listeners
+  // Event listener
   themeToggle.addEventListener('click', toggleTheme)
-  document.addEventListener('astro:after-swap', syncTheme)
-  window.addEventListener('popstate', syncTheme)
-  document.addEventListener('DOMContentLoaded', syncTheme)
 </script>
 
 <button
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
index ecadd8b..defa3b8 100644
--- a/src/layouts/Head.astro
+++ b/src/layouts/Head.astro
@@ -95,10 +95,19 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 
 <!-- Theme Toggle -->
 <script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}>
-  const systemTheme = matchMedia('(prefers-color-scheme: dark)')
-  const theme = localStorage.getItem('theme')
-    ?? (systemTheme.matches !== null ? (systemTheme.matches ? 'dark' : 'light') : defaultMode)
+function getTheme() {
+  const storedTheme = localStorage.getItem('theme')
+  if (storedTheme)
+    return storedTheme
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+  return systemTheme ? 'dark' : defaultMode
+}
+function updateTheme() {
+  const theme = localStorage.getItem('theme') || getTheme()
   document.documentElement.classList.toggle('dark', theme === 'dark')
+}
+updateTheme()
+document.addEventListener('astro:after-swap', updateTheme)
 </script>
 
 <!-- Google Analytics -->