From f6ea7fc58c8c6b7ba0dab1d5e7d4bf59eef6657f Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Tue, 29 Jul 2025 12:59:47 +0000
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20transition=20de?=
 =?UTF-8?q?=20th=C3=A8me=20avec=20une=20animation=20de=20clipPath=20et=20a?=
 =?UTF-8?q?justement=20des=20=C3=A9l=C3=A9ments=20pseudo=20pour=20le=20mod?=
 =?UTF-8?q?e=20sombre?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AppHeader.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index dfc40da..52407ed 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -21,23 +21,28 @@ function startViewTransition(event: MouseEvent | { clientX: number, clientY: num
     Math.max(y, window.innerHeight - y),
   )
 
-  const transition = document.startViewTransition(() => {
+  const transition = document.startViewTransition(async () => {
     switchTheme()
+    await nextTick()
   })
 
   transition.ready.then(() => {
-    const duration = 500
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
     document.documentElement.animate(
       {
-        clipPath: [
-          `circle(0px at ${x}px ${y}px)`,
-          `circle(${endRadius}px at ${x}px ${y}px)`,
-        ],
+        clipPath: colorMode.value === 'dark'
+          ? [...clipPath].reverse()
+          : clipPath,
       },
       {
-        duration,
-        easing: 'cubic-bezier(.76,.32,.29,.66)',
-        pseudoElement: '::view-transition-new(root)',
+        duration: 500,
+        easing: 'ease-out',
+        pseudoElement: colorMode.value === 'dark'
+          ? '::view-transition-old(root)'
+          : '::view-transition-new(root)',
       },
     )
   })