From 5f1fd438ac68640bea964097f8aab83ef5c6392b Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Mon, 8 Jan 2024 13:33:06 +0800
Subject: [PATCH 1/2] perf: improve theme switch performance

---
 src/components/Dock/Dock.vue                  | 20 ++++++++++++++-----
 .../RightSideButtons/RightSideButtons.vue     | 20 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 21d5f9b405..afd2679b43 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -102,7 +102,11 @@ function toggleDark(e: MouseEvent) {
       Math.max(x, innerWidth - x),
       Math.max(y, innerHeight - y),
     )
-    const isDark = currentAppColorScheme.value === 'dark'
+    // https://github.com/vueuse/vueuse/pull/3129
+    const style = window!.document.createElement('style')
+    const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+    style.appendChild(document.createTextNode(styleString))
+    window!.document.head.appendChild(style)
     // @ts-expect-error: Transition API
     const transition = document.startViewTransition(async () => {
       if (currentAppColorScheme.value === 'light')
@@ -117,20 +121,26 @@ function toggleDark(e: MouseEvent) {
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
       ]
-      document.documentElement.animate(
+      const animation = document.documentElement.animate(
         {
-          clipPath: isDark
+          clipPath: currentAppColorScheme.value === 'dark'
             ? [...clipPath].reverse()
             : clipPath,
         },
         {
-          duration: 400,
+          duration: 300,
           easing: 'ease-in',
-          pseudoElement: isDark
+          pseudoElement: currentAppColorScheme.value === 'dark'
             ? '::view-transition-old(root)'
             : '::view-transition-new(root)',
         },
       )
+      animation.addEventListener('finish', () => {
+        // Calling getComputedStyle forces the browser to redraw
+        // @ts-expect-error unused variable
+        const _ = window!.getComputedStyle(style!).opacity
+        document.head.removeChild(style!)
+      }, { once: true })
     })
   }
 }
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index da8ae20c68..244c60513c 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -34,7 +34,11 @@ function toggleDark(e: MouseEvent) {
       Math.max(x, innerWidth - x),
       Math.max(y, innerHeight - y),
     )
-    const isDark = currentAppColorScheme.value === 'dark'
+    // https://github.com/vueuse/vueuse/pull/3129
+    const style = window!.document.createElement('style')
+    const styleString = '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+    style.appendChild(document.createTextNode(styleString))
+    window!.document.head.appendChild(style)
     // @ts-expect-error: Transition API
     const transition = document.startViewTransition(async () => {
       if (currentAppColorScheme.value === 'light')
@@ -49,20 +53,26 @@ function toggleDark(e: MouseEvent) {
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
       ]
-      document.documentElement.animate(
+      const animation = document.documentElement.animate(
         {
-          clipPath: isDark
+          clipPath: currentAppColorScheme.value === 'dark'
             ? [...clipPath].reverse()
             : clipPath,
         },
         {
-          duration: 400,
+          duration: 300,
           easing: 'ease-in',
-          pseudoElement: isDark
+          pseudoElement: currentAppColorScheme.value === 'dark'
             ? '::view-transition-old(root)'
             : '::view-transition-new(root)',
         },
       )
+      animation.addEventListener('finish', () => {
+        // Calling getComputedStyle forces the browser to redraw
+        // @ts-expect-error unused variable
+        const _ = window!.getComputedStyle(style!).opacity
+        document.head.removeChild(style!)
+      }, { once: true })
     })
   }
 }

From 7da9c172aa12fd0b990f6dbb14e6accf2a7d1394 Mon Sep 17 00:00:00 2001
From: starknt <1431880400@qq.com>
Date: Mon, 8 Jan 2024 13:37:36 +0800
Subject: [PATCH 2/2] perf: improve theme switch performance

---
 src/components/Dock/Dock.vue                         | 3 ---
 src/components/RightSideButtons/RightSideButtons.vue | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index afd2679b43..9cbcee3a7b 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -136,9 +136,6 @@ function toggleDark(e: MouseEvent) {
         },
       )
       animation.addEventListener('finish', () => {
-        // Calling getComputedStyle forces the browser to redraw
-        // @ts-expect-error unused variable
-        const _ = window!.getComputedStyle(style!).opacity
         document.head.removeChild(style!)
       }, { once: true })
     })
diff --git a/src/components/RightSideButtons/RightSideButtons.vue b/src/components/RightSideButtons/RightSideButtons.vue
index 244c60513c..1c32db6512 100644
--- a/src/components/RightSideButtons/RightSideButtons.vue
+++ b/src/components/RightSideButtons/RightSideButtons.vue
@@ -68,9 +68,6 @@ function toggleDark(e: MouseEvent) {
         },
       )
       animation.addEventListener('finish', () => {
-        // Calling getComputedStyle forces the browser to redraw
-        // @ts-expect-error unused variable
-        const _ = window!.getComputedStyle(style!).opacity
         document.head.removeChild(style!)
       }, { once: true })
     })