doc(Layout): improve load theme logic (dotnetcore#6598)

* feat: 增加 GetPreferredThemeAsync 扩展方法

* doc: 更新主题加载逻辑防止抖动

* perf: 优化性能

* refactor: 移除 GetPreferredThemeAsync 扩展方法

* refactor: 删除 getPreferredTheme 方法

Author: ArgoZhang

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

@@ -1,4 +1,4 @@
-import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getPreferredTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
+import { copy, getDescribedElement, addLink, removeLink, addScript, getHeight, getTheme, registerBootstrapBlazorModule } from "../../_content/BootstrapBlazor/modules/utility.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export async function init(id, title, assetRoot) {
@@ -9,7 +9,7 @@ export async function init(id, title, assetRoot) {
 
     await addScript(`${assetRoot}lib/highlight/highlight.min.js`)
     await addScript(`${assetRoot}lib/highlight/cshtml-razor.min.js`)
-    await switchTheme(getPreferredTheme(), assetRoot);
+    await switchTheme(getTheme(), assetRoot);
 
     const preElement = el.querySelector('pre')
     const code = el.querySelector('pre > code')

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

@@ -1,10 +1,13 @@
 @inherits LayoutComponentBase
 
 <BootstrapBlazorRoot>
-    <Header></Header>
-    <main>
-        @Body
-    </main>
+    @if (_init)
+    {
+        <Header></Header>
+        <main>
+            @Body
+        </main>
+    }
 </BootstrapBlazorRoot>
 
 <div id="blazor-error-ui">

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

@@ -3,13 +3,21 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
+using BootstrapBlazor.Server.Data;
+using Microsoft.Extensions.Options;
+using Microsoft.JSInterop;
+
 namespace BootstrapBlazor.Server.Components.Layout;
 
 /// <summary>
 /// 母版页基类
 /// </summary>
 public partial class BaseLayout : IDisposable
 {
+    [Inject]
+    [NotNull]
+    private IJSRuntime? JSRuntime { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<BaseLayout>? Localizer { get; set; }
@@ -26,6 +34,10 @@ public partial class BaseLayout : IDisposable
     [NotNull]
     private IDispatchService<bool>? RebootDispatchService { get; set; }
 
+    [Inject]
+    [NotNull]
+    private IOptions<WebsiteOptions>? WebsiteOption { get; set; }
+
     [NotNull]
     private string? FlowText { get; set; }
 
@@ -38,6 +50,8 @@ public partial class BaseLayout : IDisposable
     [NotNull]
     private string? CancelText { get; set; }
 
+    private bool _init = false;
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -54,6 +68,19 @@ protected override void OnInitialized()
         RebootDispatchService.Subscribe(NotifyReboot);
     }
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        var module = await JSRuntime.LoadModule($"{WebsiteOption.Value.JSModuleRootPath}Layout/BaseLayout.razor.js");
+        await module.InvokeVoidAsync("initTheme");
+        _init = true;
+    }
+
     private async Task NotifyCommit(DispatchEntry<GiteePostBody> payload)
     {
         if (payload.CanDispatch())

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

@@ -0,0 +1,6 @@
+import { getTheme, setTheme } from "../../_content/BootstrapBlazor/modules/utility.js"
+
+export function initTheme() {
+    const currentTheme = getTheme();
+    setTheme(currentTheme, false);
+}

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

@@ -1,4 +1,4 @@
-import { getPreferredTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
+import { getTheme, setTheme, switchTheme, calcCenterPosition } from "../../modules/utility.js"
 import EventHandler from "../../modules/event-handler.js"
 import Data from "../../modules/data.js"
 
@@ -17,7 +17,7 @@ export function init(id, invoke, themeValue, callback) {
 
     let currentTheme = themeValue;
     if (currentTheme === 'useLocalStorage') {
-        currentTheme = getPreferredTheme();
+        currentTheme = getTheme();
     }
     setTheme(currentTheme, true);
     theme.currentTheme = currentTheme;

src/BootstrapBlazor/wwwroot/modules/utility.js

@@ -716,18 +716,8 @@ export function getHtml(options) {
     return html;
 }
 
-
-export function getPreferredTheme() {
-    const storedTheme = getTheme()
-    if (storedTheme) {
-        return storedTheme
-    }
-
-    return getAutoThemeValue();
-}
-
 export function getTheme() {
-    return localStorage.getItem('theme') || document.documentElement.getAttribute('data-bs-theme') || 'light';
+    return localStorage.getItem('theme') || document.documentElement.getAttribute('data-bs-theme') || getAutoThemeValue();
 }
 
 export function saveTheme(theme) {