1、安裝Masa Blazor

參考: MASA Blazor 安裝

2、編寫程式碼

新建Service目錄，並新增ThemeService.cs

該RequestedTheme 屬性返回 AppTheme 列舉成員。 AppTheme 列舉定義下列成員：

Unspecified，指示裝置使用的是未指定的主題。 Light，指示裝置正在使用其淺色主題。 Dark，指示裝置正在使用其深色主題。 裝置上的系統主題可能會因各種原因而更改，具體取決於裝置的配置方式。 當系統主題更改時，可以通過處理 Application.RequestedThemeChanged 事件來通知 .NET MAUI 應用。

namespace MauiMasaBlazorDemo.Service
{
    public class ThemeService
    {
        /// <summary>
        /// 獲取當前系統主題
        /// </summary>
        /// <returns></returns>
        public AppTheme GetAppTheme()
        {
            return Application.Current!.RequestedTheme;
        }

        /// <summary>
        /// 系統主題切換
        /// </summary>
        /// <param name="handler"></param>
        public void ThemeChanged(EventHandler<AppThemeChangedEventArgs> handler)
        {
            Application.Current!.RequestedThemeChanged += handler;
        }
    }
}

在Platforms / Android /MainActivity.cs檔案中 Activity的ConfigurationChanges需要包含ConfigChanges.UiMode，才能響應裝置主題更改，使用 Visual Studio 專案模板建立的 .NET MAUI 應用會自動包含此標誌。

[Activity(Theme = "@style/Maui.SplashTheme", 
    MainLauncher = true, 
     //Activity需要處理的配置變化，需要包含在ConfigurationChanges中
    ConfigurationChanges = ConfigChanges.ScreenSize | 
                           ConfigChanges.Orientation | 
                           ConfigChanges.UiMode |  // 響應系統主題變化
                           ConfigChanges.ScreenLayout | 
                           ConfigChanges.SmallestScreenSize | 
                           ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{

}

在MauiProgram.cs 注入服務

builder.Services.AddSingleton<ThemeService>();

修改Shared 目錄下MainLayout.razor檔案，新增一個底部導航欄，設定Dark屬性IsDark，Masa Blazor的元件都可以通過Dark屬性來支援暗色主題。

@inherits LayoutComponentBase

<ErrorBoundary>
    <ChildContent>
        <MApp>
            <div style="height: calc(100vh - 56px); overflow-y: auto">
                @Body
            </div>
            <MBottomNavigation Color="indigo" Absolute @bind-Value="value" Dark="IsDark">
                <MButton>
                    <MLabel>首頁</MLabel>
                    <MIcon>mdi-home</MIcon>
                </MButton>
                <MButton Class="mx-8">
                    <MLabel>工作臺</MLabel>
                    <MIcon>mdi-message-outline</MIcon>
                </MButton>
                <MButton>
                    <MLabel>我的</MLabel>
                    <MIcon>mdi-account-outline</MIcon>
                </MButton>
            </MBottomNavigation>
        </MApp>
    </ChildContent>
</ErrorBoundary>

在Shared下新建MainLayout.razor.cs

using BlazorComponent;
using MauiMasaBlazorDemo.Service;
using Microsoft.AspNetCore.Components;

namespace MauiMasaBlazorDemo.Shared
{
    public partial class MainLayout
    {
        StringNumber value = 0;

        [Inject]
        //注入主題服務
        private ThemeService ThemeService { get; set; }
       
        private bool IsDark { get; set; }

        /// <summary>
        /// 處理系統主題切換
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void HandlerAppThemeChanged(object sender, AppThemeChangedEventArgs e)
        {
            IsDark = e.RequestedTheme == AppTheme.Dark;
            InvokeAsync(StateHasChanged);
        }
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                // 獲取系統主題
                var appTheme = ThemeService.GetAppTheme();
                // 根據系統主題是否為Dark，為IsDark屬性賦值
                IsDark = appTheme == AppTheme.Dark;
                ThemeService.ThemeChanged(HandlerAppThemeChanged);
                StateHasChanged();
            }
            await base.OnAfterRenderAsync(firstRender);
        }
    }
}

切換效果如下：

我們已經實現了底部導航欄跟隨系統主題切換的功能，那如何實現全域性替換呢？ 在Masa Blazor中非常簡單，只需要修改MainLayout.razor，將 Dark="IsDark" 新增到MApp即可

@inherits LayoutComponentBase

<ErrorBoundary>
    <ChildContent>
        <MApp Dark="IsDark"> //全域性樣式
            <div style="height: calc(100vh - 56px); overflow-y: auto">
                @Body
            </div>
...
        </MApp>
    </ChildContent>
</ErrorBoundary>

我們再看一下效果

掃碼進群，瞭解更多 MASA Blazor 歡迎你的加入