From d4e5fda5d12cbb0f68d82b00b694c68dbc0994f0 Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Fri, 24 Jan 2025 00:30:39 +0000
Subject: [PATCH] fix: theme toggle fallback animation flash issue (final)

---
 src/components/ThemeToggle.astro | 71 +++++++++++++++++---------------
 src/layouts/Head.astro           |  8 +---
 src/styles/global.css            |  4 +-
 src/styles/scrollbar.css         |  6 +--
 4 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
index 37012dd..67107ab 100644
--- a/src/components/ThemeToggle.astro
+++ b/src/components/ThemeToggle.astro
@@ -1,41 +1,46 @@
 <script>
-  // Initialize theme toggle button
-  const themeToggle = document.querySelector('button[aria-pressed]') as HTMLButtonElement
-  themeToggle.setAttribute('aria-pressed', String(document.documentElement.classList.contains('dark')))
+// 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'))
+// Core theme switching logic
+function switchTheme() {
+  document.body.removeAttribute('data-restore-theme')
+  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
+function toggleTheme() {
+  if (!document.startViewTransition) {
+    switchTheme()
+    return
   }
+  document.startViewTransition(switchTheme)
+}
 
-  // Handle theme toggle with view transitions API
-  function toggleTheme() {
-    if (!document.startViewTransition) {
-      switchTheme()
-      return
-    }
-    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
-  themeToggle.addEventListener('click', toggleTheme)
-  document.addEventListener('astro:after-swap', syncTheme)
-  window.addEventListener('popstate', syncTheme)
-  window.addEventListener('pageshow', (event) => {
-    if (event.persisted) {
-      syncTheme()
-    }
+// Sync theme state
+function syncTheme() {
+  document.body.setAttribute('data-restore-theme', 'true')
+  const theme = localStorage.getItem('theme')
+  document.documentElement.classList.toggle('dark', theme === 'dark')
+  themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
+  requestAnimationFrame(() => {
+    document.body.removeAttribute('data-restore-theme')
   })
+}
+
+// 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 5a789f1..eb96358 100644
--- a/src/layouts/Head.astro
+++ b/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)
   }
 })
diff --git a/src/styles/global.css b/src/styles/global.css
index d28117a..5c26414 100644
--- a/src/styles/global.css
+++ b/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';
   }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css
index 2d0b09d..7388ecd 100644
--- a/src/styles/scrollbar.css
+++ b/src/styles/scrollbar.css
@@ -12,9 +12,9 @@
 }
 
 .scrollbar-light {
-  --os-handle-bg: #D1C6BE;
-  --os-handle-bg-hover: #C1B6AF;
-  --os-handle-bg-active: #C1B6AF;
+  --os-handle-bg: #C9C4C1;
+  --os-handle-bg-hover: #B8B3B0;
+  --os-handle-bg-active: #B8B3B0;
 }
 
 .scrollbar-dark {