我的 Maui Blazor 应用程序的明暗主题

Question

我想在我的 Maui Blazor 应用程序中实现明暗主题。如您所知，Blazor 只不过是 Html 和 Css，所以我可以轻松地为我的应用程序的内容实现深色和浅色主题（多亏了一个简单的 .dark class 添加到 html 标签）。

我遇到的问题是针对Maui应用的上下两部分

让我举个例子给你看。

Android版本

iOS版本

上图为您展示了当前的情况：左侧为浅色主题，右侧为深色主题。如您所见，深色主题对于顶部和底部部分是有问题的（只有顶部部分对于 iOS 版本是有问题的）。

我想实现的：顶部和底部的颜色应该与页面内容相同：

#292929 深色主题
#FFFFFF 浅色主题

如下图：当切换到深色主题时，所有内容都是彩色的。

我不知道如何为 Maui Blazor 实现这个，我也没有使用 Xamarin 的经验。

你能给我指明正确的方向吗？

您可能知道，BlazorWebView 使您能够在 .NET MAUI 应用程序中托管 Blazor Web 应用程序。

Answer 1

在接下来的一两个月内，应该可以通过 MAUI Community Toolkit. Discussion here 中的 StatusBarEffect 和 NavigationBarEffect 执行此操作 - 对于 Xamarin Toolkit。

这些效果目前在 Xamarin.Community.Toolkit 的分支 xamarin.develop 中。更改也将合并到 Maui Toolkit，不确定具体时间。

以下是基于该源代码的，适用于 MAUI。已测试。

Android:

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnCreate(Android.OS.Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);

        SetColors();
    }

    private void SetColors()
    {
        if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.Lollipop) {
            // Aqua.
            var color = Microsoft.Maui.Graphics.Color.FromRgb(0, 255, 255);
            // The thin bar at top of Android screen.
            Window.SetStatusBarColor(color.ToNative());
            // The thicker bar at bottom of Android screen.
            Window.SetNavigationBarColor(color.ToNative());

        }
    }

}

设置应用程序启动时的颜色。效果将包含动态设置这些颜色所需的额外逻辑。（在这些效果存在之前，您可以在持久存储中保存一个值，强制您的应用程序重新启动，读回该标志以了解要应用的颜色。或者您可以在 Android 中创建依赖服务以从 X 调用-表单代码。将需要使用 Device.BeginInvokeOnMainThread.)

iOS:

...待定...

设置状态栏颜色见ShaXam/iOS/StatusBarStyleManager/.

基本线是这些（我认为）：

UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.DarkContent, false);
            
GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();

iOS - 未测试。

我的 Maui Blazor 应用程序的明暗主题

Light and dark theme for my Maui Blazor app

blazor

maui

maui-blazor