doc(Theme): add dark theme for web site (#2630)

* refactor: 更新标签颜色 * refactor: 更新 main 最小高度 * doc: 移除侧边栏背景色 * doc: 更新代码高亮背景色 * doc: 去除权重关键字 * refactor: 更新 Select 组件背景色 * refactor: 增加 primary 颜色样式 * refactor: 增加 icon-summary 样式 * refactor: 增加 badge-menu 样式 * refactor: 更新 archor-link 颜色 * refactor: 更新 dropdown-item menu-item 颜色样式 * refactor: 更新 GlobalSearch 样式 * refactor: 调整边框颜色 * refactor: 调整 Tab 样式 * refactor: 调整 Divider 样式 * refactor: 更新 tab header 背景色 * refactor: 更新当前标签页颜色 * feat: 增加暗黑主题 * refactor: 更新主题切换逻辑 * refactor: 增加 hover 样式 * refactor: 增加黑色主题样式支持 * refactor: 增加 navbar-version 样式 * refactor: 更新右侧边框样式 * refactor: 自定义菜单项前景色 * refactor: 微调 tips 样式 * refactor: 更新圆角 * feat: 客户端存储主题 * feat: 增加主题脚本 * refactor: 复用设置主题代码 * chore: 更新 sasscompiler 配置 * refactor: 移除 motronic 样式 * doc: 更新文档 * chore: 更新配置文件 * refactor: 精简 Table 样式 * refactor: 更新分页组件暗黑样式 * refactor: 更新 code 样式 * refactor: 调整 Card 样式 * refactor: 调整 Table 暗黑样式 * refactor: 调整 btn-copy 按钮样式 * refactor: 调整 ConsoleLogger 样式 * refactor: 调整侧边栏边框 * doc: 微调间隙 * refactor: 调整全局搜索样式 * refactor: 更新 Select 组件样式 * refactor: 更新文化组件样式 * refactor: 统一 border 颜色 * refactor: 调整重连组件样式 * refactor: 微调 Header 样式 * refactor: 适配全局搜索暗黑样式 * refactor: 适配主题样式
dotnetcore · Dec 22, 2023 · ff99424 · ff99424
1 parent 98e85d8
commit ff99424
Show file tree

Hide file tree

Showing 45 changed files with 351 additions and 342 deletions.
diff --git a/.gitignore b/.gitignore
@@ -376,4 +376,4 @@ src/**/wwwroot/**/uploader
 # sass
 **/BootstrapBlazor/wwwroot/scss/theme/*.css
 **/BootstrapBlazor/wwwroot/scss/theme/*.css.map
-**/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
+**/BootstrapBlazor/wwwroot/css/*.css
diff --git a/src/BootstrapBlazor.Server/Components/App.razor b/src/BootstrapBlazor.Server/Components/App.razor
@@ -2,7 +2,7 @@
 @inject IStringLocalizer<App> Localizer
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme='light'>
 
 <head>
     <meta charset="utf-8" />
@@ -22,9 +22,9 @@
     <link rel="stylesheet" href="_content/BootstrapBlazor/css/motronic.min.css">
     <link rel="stylesheet" href="BootstrapBlazor.Server.styles.css">
     <link rel="stylesheet" href="css/site.css">
-    <link rel="stylesheet" href="css/motronic.css">
     <title>@Localizer["Title"]</title>
     <HeadOutlet @rendermode="new InteractiveServerRenderMode(false)" />
+    <script src="lib/theme.js" type="module"></script>
 </head>
 
 <body>

diff --git a/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css b/src/BootstrapBlazor.Server/Components/Components/BBLogo.razor.css
@@ -2,7 +2,7 @@
     width: 42px;
     height: auto;
     border-radius: var(--bs-border-radius);
-    background-color: var(--bs-info);
+    background-color: var(--bb-primary-color);
     border: solid 1px #fff;
     margin-right: 1rem;
 }
diff --git a/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css b/src/BootstrapBlazor.Server/Components/Components/CultureChooser.razor.css
@@ -1,18 +1,30 @@
 .culture-selector {
+    --bs-border-color: rgba(255,255,255,.2);
+    --bb-border-hover-color: rgba(255,255,255,.8);
+    --bb-select-color: rgba(255,255,255,.85);
     display: flex;
     align-items: center;
+    color: var(--bb-select-color);
 }
 
     .culture-selector span {
         margin: 0;
         color: var(--bs-navbar-color);
-        opacity: 0.85;
     }
 
     .culture-selector ::deep .select {
         width: 210px;
     }
 
-    .culture-selector ::deep .dropdown-menu {
-        --bs-dropdown-link-active-bg: #7532f9;
-    }
+::deep .form-control {
+    transition: border-color .3s linear;
+}
+
+::deep .dropdown-toggle {
+    --bs-body-bg: transparent;
+}
+
+
+::deep .form-select {
+    color: var(--bb-select-color);
+}
diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
@@ -19,6 +19,9 @@
                 opacity: 1;
             }
 
+[data-bs-theme='dark'] .card:hover {
+    box-shadow: none;
+}
 
 .card-footer {
     background-color: transparent;
@@ -81,7 +84,7 @@
 
 .demo-block > ::deep .anchor-link {
     font-weight: var(--bb-font-weight);
-    color: var(--bb-title-color);
+    color: var(--bs-body-color);
     font-size: var(--bb-sub-font-size);
     margin-top: 1rem;
     margin-bottom: .5rem;

diff --git a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor
@@ -1,3 +1,3 @@
 <div class="d-none d-xl-flex flex-xl-fill justify-content-xl-end px-3">
-    <Search PlaceHolder="@Localizer["Search"]" IsSelectAllTextOnEnter="true" IsSelectAllTextOnFocus="true" IsLikeMatch="true" Items="@ComponentItems" SearchButtonText="" OnSearch="OnSearch" OnSelectedItemChanged="OnSelectedItemChanged" SearchButtonColor="Color.None" class="btn-search" />
+    <Search PlaceHolder="@Localizer["Search"]" IsSelectAllTextOnEnter="true" IsSelectAllTextOnFocus="true" IsLikeMatch="true" Items="@ComponentItems" SearchButtonText="" OnSearch="OnSearch" OnSelectedItemChanged="OnSelectedItemChanged" SearchButtonColor="Color.None" />
 </div>
diff --git a/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css b/src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor.css
@@ -0,0 +1,26 @@
+
+::deep .auto-complete {
+    --bb-complete-border-color: rgba(255,255,255,.2);
+    --bs-border-width: 0;
+    --bb-complete-color: rgba(255,255,255,.85);
+    border: 1px solid var(--bb-complete-border-color);
+    border-radius: var(--bs-border-radius);
+    transition: border-color .3s linear;
+}
+
+::deep .form-control {
+    background-color: transparent;
+    color: var(--bb-complete-color);
+}
+
+    ::deep .form-control::placeholder {
+        color: rgba(255,255,255,.4);
+    }
+
+::deep .auto-complete:hover {
+    --bb-complete-border-color: rgba(255,255,255,.8);
+}
+
+::deep .btn {
+    color: var(--bb-complete-color);
+}
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor b/src/BootstrapBlazor.Server/Components/Components/Header.razor
@@ -40,5 +40,10 @@
         </li>
     </ul>
     <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@DownloadUrl">@DownloadText</a>
+    <div class="navbar-version ms-2">v8.0.6-beta01</div>
+    <div class="ms-2 icon-theme">
+        <img src="./images/theme-light.svg" class="icon-light" />
+        <img src="./images/theme-night.svg" class="icon-dark" />
+    </div>
 </header>
 
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
@@ -1,7 +1,7 @@
 header {
     --bb-violet-rgb: 112.520718,44.062154,249.437846;
     background-color: transparent;
-    background-image: linear-gradient(to bottom, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.95));
+    background-image: linear-gradient(to right, rgba(var(--bb-violet-rgb), 1), rgba(var(--bb-violet-rgb), 0.9));
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
     font-size: 1rem;
     transition: transform .3s ease;
@@ -14,24 +14,6 @@
     margin-right: 0;
 }
 
-::deep .btn-search .btn {
-    --bs-btn-bg: #8759ff;
-    --bs-btn-color: #fff;
-    --bs-btn-hover-bg: #7d53eb;
-    --bs-btn-hover-color: var(--bs-btn-color);
-    --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-}
-
-::deep .btn-search .form-control {
-    --bs-border-color: #fff;
-    --bb-border-focus-color: var(--bs-border-color);
-    --bb-border-hover-color: var(--bs-border-color);
-    z-index: 6;
-}
-
 ::deep .btn-fs {
     margin-top: 2px;
 }
@@ -54,6 +36,31 @@
     width: auto;
 }
 
+.navbar-version {
+    color: var(--bs-navbar-color);
+}
+
+.icon-theme {
+    border-left: 1px solid #dddddd40;
+    padding-left: 0.5rem;
+}
+
+    .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;

diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.js b/src/BootstrapBlazor.Server/Components/Components/Header.razor.js
@@ -1,4 +1,5 @@
-import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js?v=$version"
+import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/theme.js?v=$version"
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js?v=$version"
 
 export function init() {
     const scrollTop = () => (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
@@ -13,6 +14,20 @@ 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);
+        });
+    }
 }
 
 export function dispose() {

diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css b/src/BootstrapBlazor.Server/Components/Components/Pre.razor.css
@@ -13,17 +13,6 @@
         display: none;
     }
 
-::deep .btn-primary {
-    position: absolute;
-    top: .65rem;
-    right: 1.5rem;
-    font-size: 65%;
-    --bs-btn-color: var(--bs-primary);
-    --bs-btn-bg: #fff;
-    --bs-btn-padding-y: .25rem;
-    --bs-btn-padding-x: .5rem;
-}
-
 ::deep .btn-group {
     position: absolute;
     top: 0;

diff --git a/src/BootstrapBlazor.Server/Components/Components/State.razor b/src/BootstrapBlazor.Server/Components/Components/State.razor
@@ -12,7 +12,7 @@
 }
 @if (Count > 0)
 {
-    <Badge Color="Color.Info" IsPill="true">
+    <Badge Color="Color.None" IsPill="true" class="badge-menu">
         @Count
     </Badge>
 }
diff --git a/src/BootstrapBlazor.Server/Components/Components/Tips.razor b/src/BootstrapBlazor.Server/Components/Components/Tips.razor
@@ -7,7 +7,6 @@
 </Alert>
 
 @code {
-
     /// <summary>
     /// 获得/设置 图标
     /// </summary>

diff --git a/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor.css
@@ -47,3 +47,7 @@
     margin-bottom: 0;
     max-height: 260px;
 }
+
+main {
+    min-height: calc(100vh - var(--bs-header-height));
+}
diff --git a/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/MainLayout.razor.css
@@ -22,18 +22,9 @@
     margin-bottom: 0;
 }
 
-::deep p code,
-::deep li code {
-    display: inline-block;
-    padding: 0px 8px;
-    background-color: #e9ecef;
-    margin: 0;
-    border-radius: var(--bs-border-radius);
-}
-
 ::deep .code-label {
     font-weight: bold;
-    color: #333;
+    color: var(--bs-body-color);
     margin-bottom: 8px;
 }
 
@@ -84,8 +75,7 @@
         height: calc(100vh);
         position: sticky;
         top: 0;
-        border-right: solid 1px #c0c4cc;
-        background-color: #f0f0f0;
+        border-right: solid 1px var(--bs-border-color);
         margin-top: calc(var(--bs-header-height)*-1);
     }
 

diff --git a/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css b/src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.css
@@ -1,6 +1,6 @@
 .sidebar-switch {
     display: flex;
-    border-bottom: solid 1px #c0c4cc;
+    border-bottom: solid 1px var(--bs-border-color);
     justify-content: center;
     align-items: center;
 }
@@ -31,7 +31,7 @@
     top: 0;
     right: 0;
     bottom: 0;
-    background-color: rgb(208, 215, 222);
+    background-color: var(--bs-border-color);
 }
 
     .sidebar-bar .sidebar-body {
@@ -50,6 +50,14 @@
             background-color: rgb(9, 105, 218);
         }
 
+::deep .badge-menu {
+    background-color: var(--bb-primary-color);
+}
+
+::deep .icon-summary {
+    color: var(--bb-primary-color);
+}
+
 @media (min-width: 768px) {
     .sidebar-content {
         height: calc(100vh - var(--bs-header-height));

diff --git a/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css b/src/BootstrapBlazor.Server/Components/Layout/PracticeLayout.razor.css
@@ -10,7 +10,7 @@
     height: 50px;
     align-items: center;
     padding: 1rem;
-    border-bottom: solid 1px #c0c4cc;
+    border-bottom: solid 1px var(--bs-border-color);
     display: none;
 }
 
@@ -57,9 +57,8 @@
         height: calc(100vh);
         position: sticky;
         top: 0;
-        border-right: solid 1px #c0c4cc;
-        background-color: #f0f0f0;
-        margin-top: calc(var(--bs-header-height)*-1);
+        border-right: solid 1px var(--bs-border-color);
+        margin-top: calc(var(--bs-header-height) * -1);
     }
 
     .main {

diff --git a/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Coms.razor.css
@@ -6,7 +6,7 @@
 
     .coms-search .row {
         padding: 1rem 0;
-        background: #fff;
+        background: var(--bs-body-bg);
     }
 
 .coms-search-filter {
@@ -15,6 +15,10 @@
     background: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,0.8),rgba(255,255,255,0));
 }
 
+[data-bs-theme='dark'] .coms-search-filter {
+    background: linear-gradient(rgba(33,37,41,1),rgba(33,37,41,0.8),rgba(33,37,41,0));
+}
+
 @media (min-width: 768px) {
     .coms-search {
         top: 3rem;