doc(Theme): add switch theme button (#2704)

* feat: 增加 ThemeMode 组件

* chore: 更新主题样式

* chore: 更新脚本配置

* doc: 更新图标文件路径

* refactor: 更新样式

* refactor: 更新切换样式

* chore: 更新样式

* refactor: 更新切换主题脚本

* refactor: 更新组件

Author: ArgoZhang

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

@@ -43,22 +43,6 @@
     white-space: nowrap;
 }
 
-.icon-theme img {
-    cursor: pointer;
-}
-
-.icon-theme .icon-dark {
-    display: none;
-}
-
-[data-bs-theme='dark'] .icon-dark {
-    display: block;
-}
-
-[data-bs-theme='dark'] .icon-light {
-    display: none;
-}
-
 @media (min-width: 768px) {
     .navbar-header {
         position: sticky;

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

@@ -15,17 +15,19 @@ export function init() {
         prevScrollTop = currentScrollTop
     })
 
-    const themeElement = document.querySelector('.icon-theme');
-    if (themeElement) {
-        EventHandler.on(themeElement, 'click', e => {
-            let theme = getPreferredTheme();
-            if (theme === 'dark') {
-                theme = 'light';
-            }
-            else {
-                theme = 'dark';
-            }
-            setTheme(theme);
+    const themeElements = document.querySelectorAll('.icon-theme');
+    if (themeElements) {
+        themeElements.forEach(el => {
+            EventHandler.on(el, 'click', e => {
+                let theme = getPreferredTheme();
+                if (theme === 'dark') {
+                    theme = 'light';
+                }
+                else {
+                    theme = 'dark';
+                }
+                setTheme(theme);
+            });
         });
     }
 }

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

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

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

@@ -6,7 +6,7 @@
     <main>
         @Body
 
-        <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-theme-mode" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
+        <ThemeMode />
 
         <LinkButton TooltipPlacement="Placement.Left" ButtonStyle="ButtonStyle.Circle" Color="Color.None" TooltipText="@ChatTooltip" class="btn-fade btn-chat" Url="./ai-chat" Icon="fa-solid fa-comments"></LinkButton>
 

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

@@ -43,9 +43,10 @@
 }
 
 ::deep .btn-theme-mode {
-    --bs-btn-bg: #8759ff;
-    --bs-btn-hover-bg: var(--bs-btn-bg);
-    --bs-btn-active-bg: var(--bs-btn-bg);
+    --bs-btn-bg: #562fff;
+    --bs-btn-hover-bg: #562fff;
+    --bs-btn-active-bg: #562fff;
+    box-shadow: 0 0 8px #6143e2;
     bottom: 17rem;
     right: 1rem;
     overflow: hidden;

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

@@ -200,6 +200,22 @@ code {
     background-color: rgba(var(--bs-emphasis-color-rgb),.1);
 }
 
+.icon-theme img {
+    cursor: pointer;
+}
+
+.icon-theme .icon-light {
+    display: none;
+}
+
+[data-bs-theme='dark'] .icon-dark {
+    display: none;
+}
+
+[data-bs-theme='dark'] .icon-light {
+    display: block;
+}
+
 @media (min-width: 768px) {
     :root {
         --bs-header-height: 50px;