✨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>
+<script define:vars={{ lightMode, darkMode }}>
-const theme = localStorage.getItem('theme')
+// Bind click event to the button
-document.documentElement.classList.toggle('dark', theme === 'dark')
+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() {
+// Update theme
-  document.body.removeAttribute('data-restore-theme')
+function updateTheme() {
-  const isDark = document.documentElement.classList.toggle('dark')
+  // Toggle website theme
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+  document.documentElement.classList.toggle('dark')
-  if (themeToggle) {
+  // Get current theme
-    themeToggle.setAttribute('aria-pressed', String(isDark))
+  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() {
+// Initialize click event (on first load or page transition)
-  if (!document.startViewTransition) {
+document.addEventListener('astro:after-swap', setupThemeToggle)
-    switchTheme()
+setupThemeToggle()
-    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()
 </script>

src/config.ts

@@ -14,7 +14,7 @@ export const themeConfig: ThemeConfig = {
 
   // COLOR SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   color: {
-    mode: 'light', // light or dark. Matches system theme by default, falls back to configured theme mode if not available.
+    mode: 'light', // light, dark
     light: {
       primary: '#17191A', // accent color for title
       secondary: '#505050', // secondary color for text

src/content/posts/故乡.md

@@ -4,7 +4,7 @@ published: 2024-01-10
 tags: ["鲁迅"]
 ---
 
-![](https://image.radishzz.cc/image/gallery/03.webp)
+<!-- ![](https://image.radishzz.cc/image/gallery/03.webp) -->
 
 我冒了嚴寒，回到相隔二千餘里，別了二十餘年的故鄉去。
 
@@ -16,9 +16,9 @@ tags: ["鲁迅"]
 
 我這次是專為了別他而來的。我們多年聚族而居的老屋，已經公同賣給別姓了，交屋的期限，只在本年，所以必須趕在正月初一以前，永別了熟識的老屋，而且遠離了熟識的故鄉，搬家到我在謀食的異地去。
 
-第二日清早晨我到了我家的門口了。瓦楞上許多枯草的斷莖當風抖著，正在說明這老屋難免易主的原因。幾房的本家大約已經搬走了，所以很寂靜。我到了自家的房外，我的母親早已迎著出來了，接著便飛出了八歲的侄兒宏兒。
+<!-- 第二日清早晨我到了我家的門口了。瓦楞上許多枯草的斷莖當風抖著，正在說明這老屋難免易主的原因。幾房的本家大約已經搬走了，所以很寂靜。我到了自家的房外，我的母親早已迎著出來了，接著便飛出了八歲的侄兒宏兒。 -->
 
-我的母親很高興，但也藏著許多淒涼的神情，教我坐下，歇息，喝茶，且不談搬家的事。宏兒沒有見過我，遠遠的對面站著只是看。
+<!-- 我的母親很高興，但也藏著許多淒涼的神情，教我坐下，歇息，喝茶，且不談搬家的事。宏兒沒有見過我，遠遠的對面站著只是看。
 
 但我們終於談到搬家的事。我說外間的寓所已經租定了，又買了幾件傢具，此外須將家裡所有的木器賣去，再去增添。母親也說好，而且行李也略已齊集，木器不便搬運的，也小半賣去了，只是收不起錢來。
 
@@ -182,4 +182,4 @@ tags: ["鲁迅"]
 
 我在朦朧中，眼前展開一片海邊碧綠的沙地來，上面深藍的天空中掛著一輪金黃的圓月。我想：希望本是無所謂有，無所謂無的。這正如地上的路；其實地上本沒有路，走的人多了，也便成了路。
 
-一九二一年一月
+一九二一年一月 -->

src/layouts/Head.astro

@@ -76,64 +76,54 @@ const { commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', custo
 
 <!-- Theme Toggle -->
 <script is:inline define:vars={{ defaultMode: themeConfig.color.mode, lightMode, darkMode }}>
-function getCurrentTheme() {
+// Initialize theme
-  return document.documentElement.classList.contains('dark')
-}
-
-function updateMetaTheme(isDark) {
-  const metaThemeColor = document.querySelector('meta[name="theme-color"]')
-  if (metaThemeColor) {
-    metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
-  }
-}
-
-function syncTheme() {
-  const isDark = getCurrentTheme()
-  updateMetaTheme(isDark)
-}
-
 function initTheme() {
   const theme = (() => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+    const currentTheme = localStorage.getItem('theme')
-      return localStorage.getItem('theme')
+    // First priority: theme from localStorage
-    }
+    if (currentTheme)
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return currentTheme
-      return 'dark'
+    // Second priority: user configured default theme
-    }
+    if (defaultMode)
-    return defaultMode
+      return defaultMode
+    // Last priority: follow system theme
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? 'dark'
+      : 'light'
   })()
-
+  // Update website theme
   const isDark = theme === 'dark'
   document.documentElement.classList.toggle('dark', isDark)
-  updateMetaTheme(isDark)
+  // Update meta theme color
+  const metaTheme = document.querySelector('meta[name="theme-color"]')
+  if (metaTheme) {
+    metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
+  }
 }
 
+// Update theme
+function updateTheme() {
+  // Read theme from localStorage
+  const isDark = localStorage.getItem('theme') === 'dark'
+  // Set theme directly instead of toggling
+  document.documentElement.classList.toggle('dark', isDark)
+  const metaTheme = document.querySelector('meta[name="theme-color"]')
+  if (metaTheme) {
+    metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
+  }
+}
+
+// Listen to system theme changes in real-time
+window
+  .matchMedia('(prefers-color-scheme: dark)')
+  .addEventListener('change', ({ matches: isDark }) => {
+    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+    updateTheme()
+  })
+
+// Initialize theme (on first load or page transition)
+document.addEventListener('astro:after-swap', initTheme)
 initTheme()
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-  if (!localStorage.getItem('theme')) {
-    document.documentElement.classList.toggle('dark', e.matches)
-    updateMetaTheme(e.matches)
-  }
-})
-
-document.addEventListener('astro:before-swap', (event) => {
-  const isDark = getCurrentTheme()
-  event.newDocument.documentElement.classList.toggle('dark', isDark)
-  const metaThemeColor = event.newDocument.querySelector('meta[name="theme-color"]')
-  if (metaThemeColor) {
-    metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
-  }
-})
-
-document.addEventListener('theme-changed', syncTheme)
-document.addEventListener('astro:after-swap', syncTheme)
-window.addEventListener('popstate', syncTheme)
-window.addEventListener('pageshow', (event) => {
-  if (event.persisted) {
-    syncTheme()
-  }
-})
 </script>
 
 <!-- Google Analytics -->

src/styles/global.css

@@ -20,7 +20,18 @@ article img {
   --at-apply: 'cursor-zoom-in force-gpu';
 }
 
-/* Horizontal reveal animation on theme toggle */
+/* Horizontal reveal animation during theme switching */
+::view-transition-new(theme-transition) {
+  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
+  clip-path: inset(0 0 0 0);
+  z-index: 99;
+}
+
+::view-transition-old(theme-transition) {
+  animation: none;
+  z-index: -1;
+}
+
 @keyframes reveal {
   from {
     clip-path: inset(var(--from));
@@ -35,21 +46,12 @@ html:not(.dark) {
   --from: 100% 0 0 0;
 }
 
-::view-transition-new(theme-transition) {
+/* Disable animations for other elements during theme switching */
-  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
-  clip-path: inset(0 0 0 0);
-  z-index: 99;
-}
-
-::view-transition-old(theme-transition) {
-  animation: none;
-  z-index: 98;
-}
-
 html[data-theme-transition] [data-disable-transition-on-theme] {
   view-transition-name: none !important;
 }
 
+/* Fallback animation when view-transition-name is not supported */
 @supports not (view-transition-name: none) {
   html:not([data-restore-theme]) {
     --at-apply: 'transition-colors duration-300 ease-out';