feat(theme): add transition like nuxt devtools (#282)

src/components/DarkSwitcher.vue

@@ -1,11 +1,56 @@
 <script setup lang="ts">
 import { isDark } from '../store'
+
+const isAppearanceTransition = typeof document !== 'undefined'
+  // @ts-expect-error: Transition API
+  && document.startViewTransition
+  && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+function toggleDark(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value
+          ? [...clipPath].reverse()
+          : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
+      },
+    )
+  })
+}
 </script>
 
 <template>
   <button
     icon-button
     dark:i-carbon-moon i-carbon:sun
-    @click="isDark = !isDark"
+    @click="toggleDark"
   />
 </template>

src/main.css

@@ -111,3 +111,22 @@ html.dark {
 .dark .icons-item [stroke='black'] {
   stroke: currentColor;
 }
+
+/* Color Mode transition */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-old(root) {
+  z-index: 2147483646;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}