From 00149b251b8b12f34bbe7b16ee3ac64626e7f302 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Thu, 23 Jan 2025 23:33:32 +0000
Subject: [PATCH] fix: theme toggle error

---
 src/components/ThemeToggle.astro | 18 +++++++++++++++-
 src/layouts/Head.astro           | 35 ++++++++++++++++++++++----------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 9e4289d..37012dd 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,12 +1,14 @@
 <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
@@ -18,8 +20,22 @@
     document.startViewTransition(switchTheme)
   }
 
-  // Event listener
+  // 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
   themeToggle.addEventListener('click', toggleTheme)
+  document.addEventListener('astro:after-swap', syncTheme)
+  window.addEventListener('popstate', syncTheme)
+  window.addEventListener('pageshow', (event) => {
+    if (event.persisted) {
+      syncTheme()
+    }
+  })
 </script>
 
 <button
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
index defa3b8..5a789f1 100644
--- a/src/layouts/Head.astro
+++ b/src/layouts/Head.astro
@@ -95,19 +95,32 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 
 <!-- Theme Toggle -->
 <script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}>
-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()
+function initTheme() {
+  const theme = (() => {
+    // 1. 检查 localStorage
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme')
+    }
+    // 2. 检查系统主题
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+    // 3. 使用默认主题
+    return defaultMode
+  })()
+
   document.documentElement.classList.toggle('dark', theme === 'dark')
 }
-updateTheme()
-document.addEventListener('astro:after-swap', updateTheme)
+
+// 立即执行初始化
+initTheme()
+
+// 监听系统主题变化
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!localStorage.getItem('theme')) { // 只在用户未手动设置主题时响应
+    document.documentElement.classList.toggle('dark', e.matches)
+  }
+})
 </script>
 
 <!-- Google Analytics -->