un-pany
diff --git a/‎src/common/assets/styles/index.css
Lines changed: 2 additions & 0 deletions b/‎src/common/assets/styles/index.css
Lines changed: 2 additions & 0 deletions
diff --git a/‎src/common/assets/styles/view-transition.css
Lines changed: 20 additions & 0 deletions b/‎src/common/assets/styles/view-transition.css
Lines changed: 20 additions & 0 deletions
diff --git a/‎src/common/composables/useDark.ts
Lines changed: 18 additions & 1 deletion b/‎src/common/composables/useDark.ts
Lines changed: 18 additions & 1 deletion
diff --git a/‎src/pages/me/index.vue
Lines changed: 2 additions & 2 deletions b/‎src/pages/me/index.vue
Lines changed: 2 additions & 2 deletions
@@ -1,5 +1,7 @@
 /* 全局 CSS 变量 */
 @import url("./variables.css");
+/* View Transition */
+@import url("./view-transition.css");
 
 html {
   height: 100%;
 
@@ -0,0 +1,20 @@
+/* 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+） */
+
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: 0.5s ease-in clip-animation;
+  mix-blend-mode: normal;
+}
+
+@keyframes clip-animation {
+  from {
+    clip-path: circle(0px at var(--mobvue-dark-x) var(--mobvue-dark-y));
+  }
+  to {
+    clip-path: circle(var(--mobvue-dark-r) at var(--mobvue-dark-x) var(--mobvue-dark-y));
+  }
+}
@@ -1,7 +1,23 @@
 import { getIsDark, setIsDark } from "@@/utils/cache/local-storage"
+import { setCssVar } from "@@/utils/css"
 
 const isDark = ref<boolean>(getIsDark() === "true")
 
+function changeDark({ clientX, clientY }: MouseEvent) {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY)
+  )
+  const documentElement = document.documentElement
+  setCssVar("--mobvue-dark-x", `${clientX}px`, documentElement)
+  setCssVar("--mobvue-dark-y", `${clientY}px`, documentElement)
+  setCssVar("--mobvue-dark-r", `${maxRadius}px`, documentElement)
+  const handler = () => {
+    isDark.value = !isDark.value
+  }
+  document.startViewTransition ? document.startViewTransition(handler) : handler()
+}
+
 /** 初始化 */
 function initDark() {
   // watchEffect 来收集副作用
@@ -11,6 +27,7 @@ function initDark() {
   })
 }
 
+/** 黑暗模式 Composable */
 export function useDark() {
-  return { isDark, initDark }
+  return { isDark, changeDark, initDark }
 }
@@ -7,7 +7,7 @@ const router = useRouter()
 
 const userStore = useUserStore()
 
-const { isDark } = useDark()
+const { isDark, changeDark } = useDark()
 
 function onClick() {
   showToast("更多功能，敬请期待 ~")
@@ -37,7 +37,7 @@ function onLogout() {
     <van-cell-group un-mb-8px>
       <van-cell title="🌗 Dark Mode 黑暗模式" center>
         <template #right-icon>
-          <van-switch v-model="isDark" size="min(5.333vw, 40px)" />
+          <van-switch :model-value="isDark" size="min(5.333vw, 40px)" @click="changeDark" />
         </template>
       </van-cell>
       <van-cell title="📚 Documentation 文档教程" is-link url="https://juejin.cn/column/7472609448201666599" />