fix: back button error and view transition on ios, move scripts from layout to components

src/components/Button.astro

@@ -1,5 +1,5 @@
 ---
-import { moreLocales } from '@/config'
+import { moreLocales, themeConfig } from '@/config'
 import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
 import { isPostPage, isTagPage } from '@/utils/page'
 
@@ -7,6 +7,8 @@ interface Props {
   supportedLangs: string[]
 }
 
+const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
+
 const { supportedLangs } = Astro.props
 const currentPath = Astro.url.pathname
 const isPost = isPostPage(currentPath)
@@ -25,10 +27,10 @@ const nextUrl = useSupportedLangs
 ---
 
 <div
-class:list={[
+  class:list={[
   'absolute flex gap-6 top-14.6 right-7.25vw min-[823px]:max-[1024px]:right-[calc(50vw-22rem)]',
   '[@supports(-webkit-touch-callout:none)]:top-13.6', // fix position issue on ios
-  'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])'
+  'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])',
 ]}
 >
   <!-- Language switcher -->
@@ -64,4 +66,57 @@ class:list={[
       <path d="m12 1c-6.1 0-11 4.9-11 11s4.9 11 11 11 11-4.9 11-11-4.9-11-11-11m0 20c-5.8 0-10.5-4-10.5-9s4.7-9 10.5-9 10.5 4 10.5 9-4.7 9-10.5 9" />
     </svg>
   </button>
-</div>
+</div>
+
+<!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script is:inline define:vars={{ lightMode, darkMode }}>
+// 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 metaThemeColor = document.querySelector('meta[name="theme-color"]')
+  if (metaThemeColor) {
+    metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
+  }
+
+  // Update theme configuration in local storage
+  localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  document.dispatchEvent(new Event('theme-changed'))
+}
+
+// Bind click event to the button
+function setupThemeToggle() {
+  // Locate theme toggle button
+  const themeToggleButtons = document.querySelectorAll('.button-theme-toggle')
+  // Add click listener to each button
+  themeToggleButtons.forEach((button) => {
+    button.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')
+      })
+    })
+  })
+}
+
+// Initialize click event (on first load or page transition)
+setupThemeToggle()
+document.addEventListener('astro:after-swap', setupThemeToggle)
+</script>