feat: enrich motion and page transitions

src/composables/useTheme.js

@@ -22,9 +22,22 @@ export const initializeTheme = () => {
 export const useTheme = () => {
   initializeTheme()
 
-  const toggleTheme = () => {
-    applyTheme(!isDarkMode.value)
-    localStorage.setItem('darkMode', String(isDarkMode.value))
+  const toggleTheme = (event) => {
+    const updateTheme = () => {
+      applyTheme(!isDarkMode.value)
+      localStorage.setItem('darkMode', String(isDarkMode.value))
+    }
+    const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+    if (!document.startViewTransition || reducedMotion) {
+      updateTheme()
+      return
+    }
+
+    const originX = Number.isFinite(event?.clientX) && event.clientX > 0 ? event.clientX : window.innerWidth / 2
+    const originY = Number.isFinite(event?.clientY) && event.clientY > 0 ? event.clientY : window.innerHeight / 2
+    document.documentElement.style.setProperty('--theme-origin-x', `${originX}px`)
+    document.documentElement.style.setProperty('--theme-origin-y', `${originY}px`)
+    document.startViewTransition(updateTheme)
   }
 
   return {