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 欢迎你的参加