From c87f56814e3a856d26a6977a6bdd493cc2926742 Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Tue, 25 Jun 2024 16:44:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=9A=84=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ToggleTheme.vue | 34 +++++++++++++++++++++++++++
 src/styles/global.scss                | 20 ++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/components/common/ToggleTheme.vue

diff --git a/src/components/common/ToggleTheme.vue b/src/components/common/ToggleTheme.vue
new file mode 100644
index 0000000..6ed6611
--- /dev/null
+++ b/src/components/common/ToggleTheme.vue
@@ -0,0 +1,34 @@
+<template>
+  <i
+    class="mr-16 cursor-pointer"
+    :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
+    @click="toggleDark"
+  />
+</template>
+
+<script setup>
+import { useDark, useToggle } from '@vueuse/core'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+const isDark = useDark()
+function toggleDark({ clientX, clientY }) {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY),
+  )
+  const style = document.documentElement.style
+  style.setProperty('--circle-x', `${clientX}px`)
+  style.setProperty('--circle-y', `${clientY}px`)
+  style.setProperty('--circle-r', `${maxRadius}px`)
+
+  function handler() {
+    appStore.toggleDark()
+    useToggle(isDark)()
+  }
+
+  document.startViewTransition
+    ? document.startViewTransition(handler)
+    : handler()
+}
+</script>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 17bc2c3..18b6798 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -72,3 +72,23 @@ body {
     }
   }
 }
+
+/* 切换主题的动画效果 */
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: 0.5s ease-in circle-animation;
+  mix-blend-mode: normal;
+}
+
+@keyframes circle-animation {
+  from {
+    clip-path: circle(0 at var(--circle-x) var(--circle-y));
+  }
+  to {
+    clip-path: circle(var(--circle-r) at var(--circle-x) var(--circle-y));
+  }
+}