From 713281a8baff7504688aca82f7eb54c7ab52f0c3 Mon Sep 17 00:00:00 2001
From: HaHa <110732547+bprag@users.noreply.github.com>
Date: Tue, 30 Sep 2025 05:10:51 +0800
Subject: [PATCH] fix(theme-button): fix flicker during theme switch (#6782)

---
 .../layouts/src/widgets/theme-toggle/theme-button.vue        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
index 9ee4bceb..b007caca 100644
--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -64,7 +64,7 @@ function toggleTheme(event: MouseEvent) {
       `circle(0px at ${x}px ${y}px)`,
       `circle(${endRadius}px at ${x}px ${y}px)`,
     ];
-    document.documentElement.animate(
+    const animate = document.documentElement.animate(
       {
         clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
       },
@@ -76,6 +76,9 @@ function toggleTheme(event: MouseEvent) {
           : '::view-transition-new(root)',
       },
     );
+    animate.onfinish = () => {
+      transition.skipTransition();
+    };
   });
 }
 </script>