src/components/common/ToggleTheme.vue

@@ -1,34 +0,0 @@
-<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>

src/components/common/index.js

@@ -3,4 +3,3 @@ export { default as TheFooter } from './TheFooter.vue'
 export { default as AppPage } from './AppPage.vue'
 export { default as CommonPage } from './CommonPage.vue'
 export { default as LayoutSetting } from './LayoutSetting.vue'
-export { default as ToggleTheme } from './ToggleTheme.vue'

src/layouts/components/Fullscreen.vue

@@ -1,13 +0,0 @@
-<template>
-  <i
-    class="mr-16 cursor-pointer"
-    :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
-    @click="toggle"
-  />
-</template>
-
-<script setup>
-import { useFullscreen } from '@vueuse/core'
-
-const { isFullscreen, toggle } = useFullscreen()
-</script>

src/layouts/components/index.js

@@ -5,4 +5,3 @@ export { default as BreadCrumb } from './BreadCrumb.vue'
 export { default as AppTab } from './tab/index.vue'
 export { default as SideLogo } from './SideLogo.vue'
 export { default as SideMenu } from './SideMenu.vue'
-export { default as Fullscreen } from './Fullscreen.vue'

src/layouts/full/header/index.vue

@@ -13,9 +13,16 @@
     <BreadCrumb />
 
     <div class="ml-auto flex flex-shrink-0 items-center px-12 text-18">
-      <ToggleTheme />
-
-      <Fullscreen />
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
+        @click="toggleDark"
+      />
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
+        @click="toggle"
+      />
 
       <i
         class="i-fe:github mr-16 cursor-pointer"
@@ -34,8 +41,18 @@
 </template>
 
 <script setup>
-import { ToggleTheme } from '@/components'
-import { BreadCrumb, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { useDark, useFullscreen, useToggle } from '@vueuse/core'
+import { BreadCrumb, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+const isDark = useDark()
+function toggleDark() {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
+
+const { isFullscreen, toggle } = useFullscreen()
 
 function handleLinkClick(link) {
   window.open(link)

src/layouts/normal/header/index.vue

@@ -15,9 +15,16 @@
     <span class="mx-6 opacity-20">|</span>
 
     <div class="flex flex-shrink-0 items-center px-12 text-18">
-      <ToggleTheme />
-
-      <Fullscreen />
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isDark ? 'i-fe:moon' : 'i-fe:sun'"
+        @click="toggleDark"
+      />
+      <i
+        class="mr-16 cursor-pointer"
+        :class="isFullscreen ? 'i-fe:minimize' : 'i-fe:maximize'"
+        @click="toggle"
+      />
 
       <i
         class="i-fe:github mr-16 cursor-pointer"
@@ -36,10 +43,24 @@
 </template>
 
 <script setup>
-import { ToggleTheme } from '@/components'
-import { AppTab, Fullscreen, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { useDark, useFullscreen, useToggle } from '@vueuse/core'
+import { AppTab, MenuCollapse, UserAvatar } from '@/layouts/components'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+const isDark = useDark()
+function toggleDark() {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
+
+const { isFullscreen, toggle } = useFullscreen()
 
 function handleLinkClick(link) {
   window.open(link)
 }
+
+watchEffect(() => {
+  appStore.setThemeColor(appStore.primaryColor, appStore.isDark)
+})
 </script>

src/styles/global.scss

@@ -72,23 +72,3 @@ 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));
-  }
-}