feat(DockView): support auto switch theme (#388)

* refactor: 代码重构

* refactor: 支持暗黑主题

* refactor: 增加 switchTheme 方法

* refactor: 增加主题响应式逻辑

* feat: 增加加载时检测主题逻辑

* chore: bump version 9.1.8

Author: ArgoZhang

src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj

@@ -1,7 +1,7 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.7</Version>
+    <Version>9.1.8</Version>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -10,7 +10,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+    <PackageReference Include="BootstrapBlazor" Version="9.4.12" />
   </ItemGroup>
 
   <ItemGroup>

src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.cs

@@ -10,15 +10,13 @@ namespace BootstrapBlazor.Components;
 /// <summary>
 /// DockViewV2 组件
 /// </summary>
-public partial class DockViewV2
+public partial class DockViewV2 : IDisposable
 {
     /// <summary>
     /// 获得/设置 DockView 名称 默认 null 用于本地存储识别
     /// </summary>
     [Parameter]
-#if NET6_0_OR_GREATER
     [EditorRequired]
-#endif
     [NotNull]
     public string? Name { get; set; }
 
@@ -139,14 +137,18 @@ public partial class DockViewV2
     [NotNull]
     private IConfiguration? Configuration { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IThemeProvider? ThemeProviderService { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-dockview")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     private readonly List<DockViewComponentBase> _components = [];
 
     [NotNull]
-    private DockViewOptions? _options = default!;
+    private DockViewOptions? _options = null;
 
     /// <summary>
     /// <inheritdoc/>
@@ -157,6 +159,8 @@ protected override void OnInitialized()
 
         var section = Configuration.GetSection(nameof(DockViewOptions));
         _options = section.Exists() ? section.Get<DockViewOptions>() : new();
+
+        ThemeProviderService.ThemeChangedAsync += OnThemeChangedAsync;
     }
 
     /// <summary>
@@ -224,6 +228,12 @@ public async Task Reset(string? layoutConfig = null)
     /// <returns></returns>
     public Task<string?> SaveLayout() => InvokeAsync<string?>("save", Id);
 
+    private Task OnThemeChangedAsync(string themeName)
+    {
+        Theme = themeName == "dark" ? DockViewTheme.Dark : DockViewTheme.Light;
+        return Task.CompletedTask;
+    }
+
     /// <summary>
     /// 标签页关闭回调方法 由 JavaScript 调用
     /// </summary>
@@ -271,4 +281,21 @@ public async Task SplitterCallbackAsync()
             await OnSplitterCallbackAsync();
         }
     }
+
+    private void Dispose(bool disposing)
+    {
+        if (disposing)
+        {
+            ThemeProviderService.ThemeChangedAsync -= OnThemeChangedAsync;
+        }
+    }
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    public void Dispose()
+    {
+        Dispose(true);
+        GC.SuppressFinalize(this);
+    }
 }

src/components/BootstrapBlazor.DockView/Components/DockViewV2.razor.js

@@ -1,6 +1,7 @@
-import { addLink } from '../../BootstrapBlazor/modules/utility.js'
+import { addLink, getTheme } from '../../BootstrapBlazor/modules/utility.js'
 import { cerateDockview } from '../js/dockview-utils.js'
 import Data from '../../BootstrapBlazor/modules/data.js'
+import EventHandler from "../../BootstrapBlazor/modules/event-handler.js"
 
 export async function init(id, invoke, options) {
     await addLink("./_content/BootstrapBlazor.DockView/css/dockview-bb.css")
@@ -9,8 +10,15 @@ export async function init(id, invoke, options) {
         return;
     }
 
-    const dockview = cerateDockview(el, options)
-    Data.set(id, { el, dockview });
+    if(options.theme === 'dockview-theme-light') {
+        let theme = getTheme();
+        if (theme === 'dark') {
+            options.theme = `dockview-theme-dark`;
+        }
+    }
+    const dockview = cerateDockview(el, options);
+    const updateTheme = e => dockview.switchTheme(e.theme);
+    Data.set(id, { el, dockview, updateTheme });
 
     dockview.on('initialized', () => {
         invoke.invokeMethodAsync(options.initializedCallback);
@@ -24,6 +32,8 @@ export async function init(id, invoke, options) {
     dockview.on('groupSizeChanged', () => {
         invoke.invokeMethodAsync(options.splitterCallback);
     });
+
+    EventHandler.on(document, 'changed.bb.theme', updateTheme);
 }
 
 export function update(id, options) {
@@ -57,6 +67,8 @@ export function dispose(id) {
     Data.remove(id);
 
     if (dock) {
+        EventHandler.off(document, 'changed.bb.theme', dock.updateTheme);
+
         const { dockview } = dock;
         if (dockview) {
             dockview.dispose();

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js

@@ -6,12 +6,13 @@ import { getConfig, reloadFromConfig, loadPanelsFromLocalstorage, saveConfig } f
 import './dockview-extensions.js'
 
 const cerateDockview = (el, options) => {
+    const theme = options.theme || "dockview-theme-light";
     const template = el.querySelector('template');
     const dockview = new DockviewComponent(el, {
         parentElement: el,
         theme: {
             name: "bb-dockview",
-            className: options.theme || "dockview-theme-light",
+            className: theme,
             dndOverlayMounting: 'absolute',
             dndPanelOverlay: 'group'
         },
@@ -35,6 +36,14 @@ const initDockview = (dockview, options, template) => {
         window.dockview = dockview;
     }
 
+    dockview.switchTheme = theme => {
+        const themeName = `dockview-theme-${theme}`;
+        if (dockview.options.theme.className !== themeName) {
+            dockview.options.theme.className = themeName;
+            dockview.updateTheme();
+        }
+    }
+
     dockview.update = options => {
         if (options.layoutConfig) {
             reloadFromConfig(dockview, options);