From 3e679b9db28231a538fc57a9dd9cdc7241456f6e Mon Sep 17 00:00:00 2001
From: Tamago <40710111+zekunjin@users.noreply.github.com>
Date: Tue, 20 Feb 2024 15:49:58 +0800
Subject: [PATCH] feat(theme): add transition like nuxt devtools (#282)

---
 src/components/DarkSwitcher.vue | 47 ++++++++++++++++++++++++++++++++-
 src/main.css                    | 19 +++++++++++++
 2 files changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/components/DarkSwitcher.vue b/src/components/DarkSwitcher.vue
index 34bf2d7c..0349150e 100644
--- a/src/components/DarkSwitcher.vue
+++ b/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>
diff --git a/src/main.css b/src/main.css
index f1e35da7..c19bcd92 100755
--- a/src/main.css
+++ b/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;
+}