✨refactor: view animation and theme toggle

- Streamline theme toggle script in ThemeToggle component
- Improve theme initialization in Head layout
- Centralize theme color and mode configuration
- Enhance view transition handling for theme changes
- Optimize event listeners and theme synchronization

src/components/ThemeToggle.astro

@@ -1,4 +1,11 @@
+---
+import { themeConfig } from '@/config'
+
+const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+---
+
 <button
+  id="theme-toggle"
   aria-pressed="false"
   aria-label="Theme Toggle Button"
   class="absolute right-[calc(9.94vw-1.18rem)] top-[calc(7.3vw+2.6rem)] z-99 aspect-square w-7 c-secondary [@supports(-webkit-touch-callout:none)]:top-[calc(7.3vw+2.2rem)] active:scale-90"
@@ -13,82 +20,47 @@
   </svg>
 </button>
 
-<script>
-const theme = localStorage.getItem('theme')
-document.documentElement.classList.toggle('dark', theme === 'dark')
+<script define:vars={{ lightMode, darkMode }}>
+// Bind click event to the button
+function setupThemeToggle() {
+  // Locate theme toggle button
+  const themeToggleButton = document.getElementById('theme-toggle')
+  // Add click listener
+  themeToggleButton.addEventListener('click', () => {
+    // If browser doesn't support View Transitions API, update theme directly
+    if (!document.startViewTransition) {
+      updateTheme()
+      return
+    }
+    // Temporarily add markers during animation to implement view transition and disable CSS transitions
+    document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
+    document.documentElement.setAttribute('data-theme-transition', '')
+    // If browser supports View Transitions API, use it to update theme
+    const themeTransition = document.startViewTransition(updateTheme)
+    // Remove markers after animation
+    themeTransition.finished.then(() => {
+      document.documentElement.style.removeProperty('view-transition-name')
+      document.documentElement.removeAttribute('data-theme-transition')
+    })
+  })
+}
 
-function switchTheme() {
-  document.body.removeAttribute('data-restore-theme')
-  const isDark = document.documentElement.classList.toggle('dark')
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  if (themeToggle) {
-    themeToggle.setAttribute('aria-pressed', String(isDark))
+// Update theme
+function updateTheme() {
+  // Toggle website theme
+  document.documentElement.classList.toggle('dark')
+  // Get current theme
+  const isDark = document.documentElement.classList.contains('dark')
+  // Update meta theme color
+  const metaTheme = document.querySelector('meta[name="theme-color"]')
+  if (metaTheme) {
+    metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
   }
+  // Update theme configuration in local storage
   localStorage.setItem('theme', isDark ? 'dark' : 'light')
-  document.dispatchEvent(new Event('theme-changed'))
 }
 
-function toggleTheme() {
-  if (!document.startViewTransition) {
-    switchTheme()
-    return
-  }
-
-  document.documentElement.style.setProperty('view-transition-name', 'theme-transition')
-  document.documentElement.setAttribute('data-theme-transition', '')
-
-  const transition = document.startViewTransition(() => {
-    switchTheme()
-  })
-
-  transition.finished.then(() => {
-    document.documentElement.style.removeProperty('view-transition-name')
-    document.documentElement.removeAttribute('data-theme-transition')
-  })
-}
-
-function syncTheme() {
-  document.documentElement.setAttribute('data-restore-theme', 'true')
-  const theme = localStorage.getItem('theme')
-  document.documentElement.classList.toggle('dark', theme === 'dark')
-
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  if (themeToggle) {
-    themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
-  }
-
-  requestAnimationFrame(() => {
-    document.documentElement.removeAttribute('data-restore-theme')
-  })
-}
-
-// 事件处理函数
-function handleAfterSwap() {
-  syncTheme()
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  if (themeToggle) {
-    themeToggle.addEventListener('click', toggleTheme)
-  }
-}
-
-function handlePageShow(event: PageTransitionEvent) {
-  if (event.persisted) {
-    syncTheme()
-  }
-}
-
-// 集中管理所有事件监听器
-function initThemeEvents() {
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  if (themeToggle) {
-    themeToggle.addEventListener('click', toggleTheme)
-  }
-
-  document.addEventListener('astro:after-swap', handleAfterSwap)
-  window.addEventListener('popstate', syncTheme)
-  window.addEventListener('pageshow', handlePageShow)
-}
-
-// 初始化
-initThemeEvents()
+// Initialize click event (on first load or page transition)
+document.addEventListener('astro:after-swap', setupThemeToggle)
+setupThemeToggle()
 </script>