feat(ThemeProvider): add ThemeProvider component (#3430)

* feat: 增加 ThemeProvider 服务 * feat: 增加 ThemeProvider 组件 * doc: 更新示例 * feat: 增加 ThemeProvider 组件 * doc: 精简代码 * feat: 增加 auto 模式样式值 * refactor: 增加 ActiveModeIcon 图标 * chore: 格式化代码 * style: 微调样式 * test: 增加单元测试 * doc: 增加本地化 * chore: bump version 8.5.3 * refactor: 重构脚本逻辑 * doc: 更新初始化主题逻辑 * feat: 增加 SetTheme 方法 * reafactor: 重构脚本提高代码复用率 * feat: 增加 SetTheme/GetTheme 扩展方法 * feat: 增加 IThemeProvider 服务 * test: 更新单元测试
dotnetcore · May 5, 2024 · 46c6e66 · 46c6e66
1 parent 440c80e
commit 46c6e66
Show file tree

Hide file tree

Showing 22 changed files with 408 additions and 47 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor b/src/BootstrapBlazor.Server/Components/Components/Header.razor
@@ -41,9 +41,6 @@
     </ul>
     <a class="btn btn-bd-download d-none d-lg-block mb-3 mb-md-0 ms-md-3" target="_blank" href="@DownloadUrl">@DownloadText</a>
     <div class="navbar-version ms-2 d-none d-lg-block">@_versionString</div>
-    <div class="icon-theme ms-2 d-none d-lg-block">
-        <img src="./images/theme-light.svg" class="icon-light" />
-        <img src="./images/theme-night.svg" class="icon-dark" />
-    </div>
+    <ThemeProvider class="ms-2 d-none d-lg-block"></ThemeProvider>
 </header>
 
diff --git a/src/BootstrapBlazor.Server/Components/Components/Header.razor.css b/src/BootstrapBlazor.Server/Components/Components/Header.razor.css
@@ -46,6 +46,18 @@
     white-space: nowrap;
 }
 
+::deep .bb-theme-mode .dropdown-toggle {
+    color: var(--bs-navbar-color);
+}
+
+::deep .bb-theme-mode .dropdown-menu li {
+    padding: 0 4px;
+}
+
+    ::deep .bb-theme-mode .dropdown-menu li button {
+        border-radius: var(--bs-border-radius);
+    }
+
 @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,5 +1,4 @@
-import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/theme.js"
-import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
+import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init() {
     const scrollTop = () => (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop
@@ -9,27 +8,12 @@ export function init() {
         const currentScrollTop = scrollTop()
         if (currentScrollTop > prevScrollTop) {
             items.forEach(item => item.classList.add('hide'))
-        } else {
+        }
+        else {
             items.forEach(item => item.classList.remove('hide'))
         }
         prevScrollTop = currentScrollTop
     })
-
-    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);
-            });
-        });
-    }
 }
 
 export function dispose() {

diff --git a/src/BootstrapBlazor.Server/wwwroot/lib/theme.js b/src/BootstrapBlazor.Server/wwwroot/lib/theme.js
@@ -1,3 +1,3 @@
-import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/theme.js"
+import { getPreferredTheme, setTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
 
-setTheme(getPreferredTheme())
+setTheme(getPreferredTheme(), false)
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.5.2</Version>
+    <Version>8.5.3</Version>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor
@@ -0,0 +1,32 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+@attribute [BootstrapModuleAutoLoader]
+
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
+    <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <i class="bb-theme-mode-active invisible"></i>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-end">
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" data-bb-theme-value="light">
+                <i class="@LightModeIcon bb-theme-mode-light" data-bb-theme-icon="@LightModeIcon"></i>
+                <span class="mx-2">@LightModeText</span>
+                <i class="@ActiveIcon bb-theme-mode-check"></i>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" data-bb-theme-value="dark">
+                <i class="@DarkModeIcon bb-theme-mode-dark" data-bb-theme-icon="@DarkModeIcon"></i>
+                <span class="mx-2">@DarkModeText</span>
+                <i class="@ActiveIcon bb-theme-mode-check"></i>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" data-bb-theme-value="auto">
+                <i class="@AutoModeIcon bb-theme-mode-auto" data-bb-theme-icon="@AutoModeIcon"></i>
+                <span class="mx-2">@AutoModeText</span>
+                <i class="@ActiveIcon bb-theme-mode-check"></i>
+            </button>
+        </li>
+    </ul>
+</div>
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.cs b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.cs
@@ -0,0 +1,82 @@
+// 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/
+
+using Microsoft.Extensions.Localization;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// ThemeProvider 组件
+/// </summary>
+public partial class ThemeProvider
+{
+    /// <summary>
+    /// 获得/设置 自动模式图标 默认 null
+    /// </summary>
+    [Parameter]
+    public string? AutoModeIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 自动模式文本 默认 null 未设置使用本地化资源
+    /// </summary>
+    [Parameter]
+    public string? AutoModeText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 暗黑模式图标 默认 null
+    /// </summary>
+    [Parameter]
+    public string? DarkModeIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 暗黑模式文本 默认 null 未设置使用本地化资源
+    /// </summary>
+    [Parameter]
+    public string? DarkModeText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 明亮模式图标 默认 null
+    /// </summary>
+    [Parameter]
+    public string? LightModeIcon { get; set; }
+
+    /// <summary>
+    /// 获得/设置 明亮模式文本 默认 null 未设置使用本地化资源
+    /// </summary>
+    [Parameter]
+    public string? LightModeText { get; set; }
+
+    /// <summary>
+    /// 获得/设置 当前选中模式图标 默认 null
+    /// </summary>
+    [Parameter]
+    public string? ActiveIcon { get; set; }
+
+    [Inject, NotNull]
+    private IIconTheme? IconTheme { get; set; }
+
+    [Inject, NotNull]
+    private IStringLocalizer<ThemeProvider>? Localizer { get; set; }
+
+    private string? ClassString => CssBuilder.Default("dropdown bb-theme-mode")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+
+        AutoModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderAutoModeIcon);
+        DarkModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderDarkModeIcon);
+        LightModeIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderLightModeIcon);
+        ActiveIcon ??= IconTheme.GetIconByKey(ComponentIcons.ThemeProviderActiveModeIcon);
+
+        AutoModeText ??= Localizer[nameof(AutoModeText)];
+        DarkModeText ??= Localizer[nameof(DarkModeText)];
+        LightModeText ??= Localizer[nameof(LightModeText)];
+    }
+}
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.js
@@ -0,0 +1,35 @@
+import { getAutoThemeValue, getPreferredTheme, setActiveTheme, setTheme, saveTheme } from "../../modules/utility.js"
+import EventHandler from "../../modules/event-handler.js"
+
+export function init(id) {
+    const el = document.getElementById(id);
+    if (el) {
+        const currentTheme = getPreferredTheme();
+        const activeItem = el.querySelector(`.dropdown-item[data-bb-theme-value="${currentTheme}"]`);
+        if (activeItem) {
+            setActiveTheme(el, activeItem);
+        }
+
+        const items = el.querySelectorAll('.dropdown-item');
+        items.forEach(item => {
+            EventHandler.on(item, 'click', () => {
+                setActiveTheme(el, item);
+
+                let theme = item.getAttribute('data-bb-theme-value');
+                if (theme === 'auto') {
+                    theme = getAutoThemeValue();
+                }
+                setTheme(theme, false);
+                saveTheme(theme);
+            });
+        });
+    }
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+    const items = el.querySelectorAll('.dropdown-item');
+    items.forEach(item => {
+        EventHandler.off(item, 'click');
+    });
+}
diff --git a/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.scss b/src/BootstrapBlazor/Components/ThemeProvider/ThemeProvider.razor.scss
@@ -0,0 +1,33 @@
+.bb-theme-mode {
+    --bb-theme-mode-width: 128px;
+    --bb-theme-mode-label-width: 40px;
+    --bb-theme-mode-icon-width: 14px;
+    --bb-theme-mode-item-margin-top: 2px;
+
+    .bb-theme-mode-active {
+        width: var(--bb-theme-mode-icon-width);
+        display: inline-block;
+    }
+
+    .dropdown-menu {
+        --bs-dropdown-min-width: var(--bb-theme-mode-width);
+
+        li:not(:first-child) {
+            margin-top: var(--bb-theme-mode-item-margin-top);
+        }
+
+        .dropdown-item {
+            span {
+                width: var(--bb-theme-mode-label-width);
+            }
+
+            i {
+                width: var(--bb-theme-mode-icon-width);
+            }
+
+            &:not(.active) .bb-theme-mode-check {
+                display: none;
+            }
+        }
+    }
+}
diff --git a/src/BootstrapBlazor/Enums/ComponentIcons.cs b/src/BootstrapBlazor/Enums/ComponentIcons.cs
@@ -782,5 +782,25 @@ public enum ComponentIcons
     /// <summary>
     /// QueryBuilder 组件 移除按钮图标
     /// </summary>
-    QueryBuilderRemoveIcon
+    QueryBuilderRemoveIcon,
+
+    /// <summary>
+    /// ThemeProvider 组件 自动模式图标
+    /// </summary>
+    ThemeProviderAutoModeIcon,
+
+    /// <summary>
+    /// ThemeProvider 组件 暗黑模式图标
+    /// </summary>
+    ThemeProviderDarkModeIcon,
+
+    /// <summary>
+    /// ThemeProvider 组件 明亮模式图标
+    /// </summary>
+    ThemeProviderLightModeIcon,
+
+    /// <summary>
+    /// ThemeProvider 组件 明亮模式图标
+    /// </summary>
+    ThemeProviderActiveModeIcon
 }
diff --git a/src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs b/src/BootstrapBlazor/Extensions/BootstrapBlazorServiceCollectionExtensions.cs
@@ -43,6 +43,9 @@ public static IServiceCollection AddBootstrapBlazor(this IServiceCollection serv
         // Table 导出服务
         services.TryAddScoped<ITableExport, DefaultTableExport>();
 
+        // 主题服务
+        services.TryAddScoped<IThemeProvider, DefaultThemeProvider>();
+
         // IP 地理位置定位服务
         services.TryAddSingleton<IIpLocatorFactory, DefaultIpLocatorFactory>();
         services.AddSingleton<IIpLocatorProvider, JuHeIpLocatorProvider>();

diff --git a/src/BootstrapBlazor/Extensions/JSModuleExtensions.cs b/src/BootstrapBlazor/Extensions/JSModuleExtensions.cs
@@ -185,4 +185,19 @@ public static string GetTypeModuleName(this Type type)
     /// <param name="selector"></param>
     /// <returns>Returns a <see cref="string"/> formatted element ID</returns>
     public static ValueTask<string?> GetHtml(this JSModule module, string? id = null, string? selector = null) => module.InvokeAsync<string?>("getHtml", new { id, selector });
+
+    /// <summary>
+    /// 设置主题方法
+    /// </summary>
+    /// <param name="module">An instance of <see cref="JSModule"/></param>
+    /// <param name="themeName">theme name</param>
+    /// <returns></returns>
+    public static ValueTask SetTheme(this JSModule module, string themeName) => module.InvokeVoidAsync("setTheme", themeName, true);
+
+    /// <summary>
+    /// 设置主题方法
+    /// </summary>
+    /// <param name="module">An instance of <see cref="JSModule"/></param>
+    /// <returns></returns>
+    public static ValueTask<string?> GetTheme(this JSModule module) => module.InvokeAsync<string?>("getTheme");
 }
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
@@ -356,5 +356,10 @@
   "BootstrapBlazor.Components.ClockPicker": {
     "AMText": "AM",
     "PMText": "PM"
+  },
+  "BootstrapBlazor.Components.ThemeProvider": {
+    "AutoModeText": "Auto",
+    "DarkModeText": "Dark",
+    "LightModeText": "Light"
   }
 }
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
@@ -356,5 +356,10 @@
   "BootstrapBlazor.Components.ClockPicker": {
     "AMText": "上午",
     "PMText": "下午"
+  },
+  "BootstrapBlazor.Components.ThemeProvider": {
+    "AutoModeText": "自动",
+    "DarkModeText": "暗黑",
+    "LightModeText": "明亮"
   }
 }
diff --git a/src/BootstrapBlazor/Options/IconThemeOptions.cs b/src/BootstrapBlazor/Options/IconThemeOptions.cs
@@ -234,5 +234,10 @@ public IconThemeOptions()
         { ComponentIcons.QueryBuilderPlusIcon, "fa-solid fa-plus" },
         { ComponentIcons.QueryBuilderMinusIcon, "fa-solid fa-minus" },
         { ComponentIcons.QueryBuilderRemoveIcon, "fa-solid fa-xmark" },
+
+        { ComponentIcons.ThemeProviderAutoModeIcon, "fa-solid fa-circle-half-stroke" },
+        { ComponentIcons.ThemeProviderLightModeIcon, "fa-solid fa-sun" },
+        { ComponentIcons.ThemeProviderDarkModeIcon, "fa-solid fa-moon" },
+        { ComponentIcons.ThemeProviderActiveModeIcon, "fa-solid fa-check" }
     };
 }
diff --git a/src/BootstrapBlazor/Services/DefaultThemeProvider.cs b/src/BootstrapBlazor/Services/DefaultThemeProvider.cs
@@ -0,0 +1,28 @@
+// 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.Components;
+
+class DefaultThemeProvider(IJSRuntime jsRuntime) : IThemeProvider
+{
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="themeName"></param>
+    public async ValueTask SetThemeAsync(string themeName)
+    {
+        var module = await jsRuntime.LoadUtility();
+        await module.SetTheme(themeName);
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public async ValueTask<string?> GetThemeAsync()
+    {
+        var module = await jsRuntime.LoadUtility();
+        return await module.GetTheme();
+    }
+}