From cf2c7f970cdd492a0bc4a983943e72e1bad97ae7 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 9 Mar 2025 09:37:08 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20calcCenterPosi?=
 =?UTF-8?q?tion=20=E5=B7=A5=E5=85=B7=E6=96=B9=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Components/ThemeMode.razor.js              | 6 ++++--
 .../Components/ThemeProvider/ThemeProvider.razor.js       | 6 ++++--
 src/BootstrapBlazor/wwwroot/modules/utility.js            | 8 ++++++++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js b/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js
index 2e29d66b745..f0a7962ba3b 100644
--- a/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js
+++ b/src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.js
@@ -1,4 +1,4 @@
-import { getTheme, switchTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { getTheme, switchTheme, calcCenterPosition } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
@@ -12,7 +12,9 @@ export function init(id) {
             else {
                 theme = 'dark';
             }
-            switchTheme(theme, window.innerWidth, window.innerHeight);
+
+            const rect = calcCenterPosition(el);
+            switchTheme(theme, rect.x, rect.y);
         });
     }
 }
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
index 6f22cb48456..0e51455a0f6 100644
--- a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
+++ b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
@@ -1,4 +1,4 @@
-import { getPreferredTheme, setTheme, switchTheme } from "../../modules/utility.js"
+import { getPreferredTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
 import EventHandler from "../../modules/event-handler.js"
 import Data from "../../modules/data.js"
 
@@ -25,7 +25,9 @@ export function init(id, invoke, themeValue, callback) {
     EventHandler.on(el, 'click', '.dropdown-item', e => {
         const activeTheme = e.delegateTarget.getAttribute('data-bb-theme-value');
         theme.currentTheme = activeTheme;
-        switchTheme(activeTheme, window.innerWidth, 0);
+
+        const rect = calcCenterPosition(el);
+        switchTheme(activeTheme, rect.x, rect.y);
         if (callback) {
             invoke.invokeMethodAsync(callback, activeTheme);
         }
diff --git a/src/BootstrapBlazor/wwwroot/modules/utility.js b/src/BootstrapBlazor/wwwroot/modules/utility.js
index f0fe3e1cf5f..50c448744f6 100644
--- a/src/BootstrapBlazor/wwwroot/modules/utility.js
+++ b/src/BootstrapBlazor/wwwroot/modules/utility.js
@@ -841,6 +841,14 @@ export function setTitle(title) {
     document.title = title;
 }
 
+export function calcCenterPosition(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        x: rect.left + el.offsetWidth / 2,
+        y: rect.top + el.offsetHeight / 2
+    }
+}
+
 export {
     autoAdd,
     autoRemove,

From 2fde9af512598b831a0c87a19ef74d105b5e7fc4 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 9 Mar 2025 09:42:12 +0800
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BootstrapBlazor/wwwroot/scss/root.scss | 51 ++++++++++++++++------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/BootstrapBlazor/wwwroot/scss/root.scss b/src/BootstrapBlazor/wwwroot/scss/root.scss
index bd282850d9a..9b94bab5629 100644
--- a/src/BootstrapBlazor/wwwroot/scss/root.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/root.scss
@@ -76,13 +76,48 @@ a, a:hover, a:focus {
     --bs-popover-body-padding-y: 0.5rem;
 }
 
-::view-transition-old(root) {
+::view-transition-old(*) {
+    mix-blend-mode: normal;
     animation: none;
+    z-index: 1;
 }
 
-::view-transition-new(root) {
+::view-transition-new(*) {
     mix-blend-mode: normal;
-    animation: clip .3s ease-in;
+    animation: clip .3s ease-in-out;
+    z-index: 9999;
+}
+
+@keyframes clip {
+    from {
+        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+
+    to {
+        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+}
+
+[data-bs-theme='dark'] {
+    &::view-transition-old(*) {
+        animation: clip2 .3s ease-in-out;
+        z-index: 9999;
+    }
+
+    &::view-transition-new(*) {
+        animation: none;
+        z-index: 1;
+    }
+}
+
+@keyframes clip2 {
+    from {
+        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
+    }
+
+    to {
+        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
+    }
 }
 
 body:before {
@@ -125,13 +160,3 @@ body:before {
         content: "extraExtraLarge";
     }
 }
-
-@keyframes clip {
-    from {
-        clip-path: circle(0% at var(--bb-theme-x) var(--bb-theme-y));
-    }
-
-    to {
-        clip-path: circle(100% at var(--bb-theme-x) var(--bb-theme-y));
-    }
-}