doc(Theme): add switch theme transition (#3496)

* refactor: 更新搜索弹窗 z-index

* feat: 修复手机模式切换明亮暗黑模式按钮

* refactor: 增加点击事件释放逻辑

* feat: 增加主题切换特效

* chore: 更新变量名称

src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css

@@ -57,7 +57,7 @@
     top: var(--bb-global-search-top);
     left: var(--bb-global-search-left);
     right: var(--bb-global-search-right);
-    z-index: 45;
+    z-index: 50;
     height: calc(100vh - 160px);
     color: var(--bs-body-color);
     background-color: var(--bs-body-bg);

src/BootstrapBlazor.Server/Components/Components/Header.razor.js

@@ -1,6 +1,8 @@
-import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
+import { getTheme, setTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+import Data from "../../_content/BootstrapBlazor/modules/data.js"
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
-export function init() {
+export function init(id) {
     const scrollTop = () => (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
     let prevScrollTop = 0;
     EventHandler.on(document, 'scroll', () => {
@@ -13,9 +15,36 @@ export function init() {
             items.forEach(item => item.classList.remove('hide'))
         }
         prevScrollTop = currentScrollTop
-    })
+    });
+
+    const themeElement = document.querySelector('.icon-theme');
+    if (themeElement) {
+        EventHandler.on(themeElement, 'click', e => {
+            let theme = getTheme();
+            if (theme === 'dark') {
+                theme = 'light';
+            }
+            else {
+                theme = 'dark';
+            }
+            document.documentElement.style.setProperty('--bb-theme-x', `${window.innerWidth}px`);
+            document.documentElement.style.setProperty('--bb-theme-y', `${window.innerHeight}px`);
+            document.startViewTransition(() => {
+                setTheme(theme, true);
+            });
+        });
+    }
+
+    Data.set(id, themeElement);
 }
 
-export function dispose() {
-    EventHandler.off(document, 'scroll')
+export function dispose(id) {
+    EventHandler.off(document, 'scroll');
+
+    const themeElement = Data.get(id);
+    Data.remove(id);
+
+    if (themeElement) {
+        EventHandler.off(themeElement, 'click');
+    }
 }

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor

@@ -1,6 +1,6 @@
 @inherits ComponentBase
 
-<div class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex d-lg-none">
-    <img src="./images/theme-light.svg" class="icon-light" />
-    <img src="./images/theme-night.svg" class="icon-dark" />
+<div class="btn btn-circle btn-fade btn-theme-mode icon-theme d-flex">
+    <i class="@GetLightIconClassString"></i>
+    <i class="@GetDarkIconClassString"></i>
 </div>

src/BootstrapBlazor.Server/Components/Components/ThemeMode.razor.cs

@@ -0,0 +1,37 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Components;
+
+/// <summary>
+/// ThemeMode 页面
+/// </summary>
+public partial class ThemeMode
+{
+    [Inject, NotNull]
+    private IIconTheme? IconTheme { get; set; }
+
+    private string? GetLightIconClassString => CssBuilder.Default("icon-light")
+        .AddClass(_lightModeIcon)
+        .Build();
+
+    private string? GetDarkIconClassString => CssBuilder.Default("icon-dark")
+        .AddClass(_darkModeIcon)
+        .Build();
+
+    private string? _darkModeIcon;
+
+    private string? _lightModeIcon;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _darkModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderDarkModeIcon);
+        _lightModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderLightModeIcon);
+    }
+}

src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css

@@ -53,6 +53,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    color: var(--bb-button-chat-color);
 }
 
 ::deep pre {

src/BootstrapBlazor.Server/wwwroot/css/site.css

@@ -266,20 +266,16 @@ code {
     background-color: rgba(var(--bs-emphasis-color-rgb),.1);
 }
 
-.icon-theme img {
-    cursor: pointer;
-}
-
-.icon-theme .icon-light {
+.icon-theme .icon-dark {
     display: none;
 }
 
 [data-bs-theme='dark'] .icon-dark {
-    display: none;
+    display: block;
 }
 
 [data-bs-theme='dark'] .icon-light {
-    display: block;
+    display: none;
 }
 
 .layout-demo {
@@ -313,6 +309,25 @@ code {
     width: 320px;
 }
 
+::view-transition-old(root) {
+    animation: none;
+}
+
+::view-transition-new(root) {
+    mix-blend-mode: normal;
+    animation: clip .3s ease-in;
+}
+
+@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));
+    }
+}
+
 @media (min-width: 768px) {
     :root {
         --bs-header-height: 50px;

src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js

@@ -1,4 +1,4 @@
-import { getAutoThemeValue, getPreferredTheme, setActiveTheme, setTheme, saveTheme } from "../../modules/utility.js"
+import { getAutoThemeValue, getPreferredTheme, setActiveTheme, setTheme } from "../../modules/utility.js"
 import EventHandler from "../../modules/event-handler.js"
 
 export function init(id) {
@@ -19,8 +19,11 @@ export function init(id) {
                 if (theme === 'auto') {
                     theme = getAutoThemeValue();
                 }
-                setTheme(theme, false);
-                saveTheme(theme);
+                document.documentElement.style.setProperty('--bb-theme-x', `${window.innerWidth}px`);
+                document.documentElement.style.setProperty('--bb-theme-y', '0px');
+                document.startViewTransition(() => {
+                    setTheme(theme, true);
+                });
             });
         });
     }