移除 useViewTransition 函数封装

Author: hooray

src/assets/styles/globals.css

@@ -1,5 +1,7 @@
 /* 页面布局 CSS 变量 */
 :root {
+  color-scheme: light;
+
   /* 头部高度 */
   --g-header-height: 60px;
 
@@ -16,42 +18,44 @@
 
   /* 工具栏高度 */
   --g-toolbar-height: 50px;
+
+  /* 滚动条颜色 */
+  --scrollbar-color: 240 5.9% 90%;
+
+  &.dark {
+    color-scheme: dark;
+
+    --scrollbar-color: 240 3.7% 15.9%;
+  }
 }
 
 /* 明暗模式 CSS 变量 */
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
-  color-scheme: light;
+::view-transition-old(root),
+::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
 
-  &::view-transition-old(root),
-  &::view-transition-new(root) {
-    mix-blend-mode: normal;
-    animation: none;
-  }
+::view-transition-old(root) {
+  z-index: 0;
+}
 
+::view-transition-new(root) {
+  z-index: 1;
+}
+
+.dark {
   &::view-transition-old(root) {
     z-index: 1;
   }
 
   &::view-transition-new(root) {
-    z-index: 9999;
-  }
-
-  &.dark {
-    color-scheme: dark;
-
-    &::view-transition-old(root) {
-      z-index: 9999;
-    }
-
-    &::view-transition-new(root) {
-      z-index: 1;
-    }
+    z-index: 0;
   }
 }
 
 * {
-  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-color: hsl(var(--scrollbar-color)) transparent;
   scrollbar-width: thin;
 }
 

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -8,28 +8,33 @@ defineOptions({
 const settingsStore = useSettingsStore()
 
 function toggleColorScheme(event: MouseEvent) {
-  const { startViewTransition } = useViewTransition(() => {
+  if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
     settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    return
+  }
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+  const transition = document.startViewTransition(async () => {
+    settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
+    await nextTick()
   })
-  startViewTransition()?.ready.then(() => {
-    const x = event.clientX
-    const y = event.clientY
-    const endRadius = Math.hypot(
-      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )
+  transition.ready.then(() => {
     const clipPath = [
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
     ]
     document.documentElement.animate(
       {
-        clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
+        clipPath: settingsStore.currentColorScheme === 'light' ? clipPath : clipPath.reverse(),
       },
       {
-        duration: 300,
-        easing: 'ease-out',
-        pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
+        duration: 500,
+        easing: 'ease-in-out',
+        pseudoElement: settingsStore.currentColorScheme === 'light' ? '::view-transition-new(root)' : '::view-transition-old(root)',
       },
     )
   })

src/types/auto-imports.d.ts

@@ -80,7 +80,6 @@ declare global {
   const useSlots: typeof import('vue')['useSlots']
   const useTabbar: typeof import('../utils/composables/useTabbar')['default']
   const useTemplateRef: typeof import('vue')['useTemplateRef']
-  const useViewTransition: typeof import('../utils/composables/useViewTransition')['default']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']