fix: theme toggle fallback animation flash issue (final)

src/components/ThemeToggle.astro

@@ -1,41 +1,46 @@
 <script>
-  // Initialize theme toggle button
+// Initialize theme toggle button
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
+const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
+themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
 
-  // Core theme switching logic
+// Core theme switching logic
-  function switchTheme() {
+function switchTheme() {
-    const isDark = document.documentElement.classList.toggle('dark')
+  document.body.removeAttribute('data-restore-theme')
-    themeToggle.setAttribute('aria-pressed', String(isDark))
+  const isDark = document.documentElement.classList.toggle('dark')
-    localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  themeToggle.setAttribute('aria-pressed', String(isDark))
-    document.dispatchEvent(new Event('theme-changed'))
+  localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  document.dispatchEvent(new Event('theme-changed'))
+}
+
+// Handle theme toggle with view transitions API
+function toggleTheme() {
+  if (!document.startViewTransition) {
+    switchTheme()
+    return
   }
+  document.startViewTransition(switchTheme)
+}
 
-  // Handle theme toggle with view transitions API
+// Sync theme state
-  function toggleTheme() {
+function syncTheme() {
-    if (!document.startViewTransition) {
+  document.body.setAttribute('data-restore-theme', 'true')
-      switchTheme()
+  const theme = localStorage.getItem('theme')
-      return
+  document.documentElement.classList.toggle('dark', theme === 'dark')
-    }
+  themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
-    document.startViewTransition(switchTheme)
+  requestAnimationFrame(() => {
-  }
+    document.body.removeAttribute('data-restore-theme')
-
-  // 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()
-    }
   })
+}
+
+// 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

src/layouts/Head.astro

@@ -97,27 +97,21 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 <script is:inline define:vars={{ defaultMode: themeConfig.color.mode }}>
 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')
 }
 
-// 立即执行初始化
 initTheme()
 
-// 监听系统主题变化
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-  if (!localStorage.getItem('theme')) { // 只在用户未手动设置主题时响应
+  if (!localStorage.getItem('theme')) {
     document.documentElement.classList.toggle('dark', e.matches)
   }
 })

src/styles/global.css

@@ -64,7 +64,7 @@ animation: none;
 z-index: -1;
 }
 @supports not (view-transition-name: none) {
-  body {
+  body:not([data-restore-theme]) {
     --at-apply: 'transition-all duration-500 ease-in-out';
   }
-  }
+}

src/styles/scrollbar.css

@@ -12,9 +12,9 @@
 }
 
 .scrollbar-light {
-  --os-handle-bg: #D1C6BE;
+  --os-handle-bg: #C9C4C1;
-  --os-handle-bg-hover: #C1B6AF;
+  --os-handle-bg-hover: #B8B3B0;
-  --os-handle-bg-active: #C1B6AF;
+  --os-handle-bg-active: #B8B3B0;
 }
 
 .scrollbar-dark {