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

Question

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

我面临的问题是 Maui 应用程序的上部和下部。

让我举个例子。

安卓版本

iOS 版本

上面的图片向您展示了当前的情况：左侧为浅色主题，右侧为深色主题。可以看到，深色主题对于顶部和底部是有问题的（iOS版本只有顶部有问题）。

我想要达到的效果：顶部和底部的颜色应该与页面内容相同：

• #292929 用于深色主题
• #FFFFFF 用于 Light 主题

类似于下图：当切换到深色主题时，所有东西都是彩色的。

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

请您指出正确的方向吗？

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

Answer 1

在接下来的一两个月内，应该可以通过MAUI Community Toolkit 中的StatusBarEffect 和NavigationBarEffect 执行此操作。讨论 here - 用于 Xamarin 工具包。

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

以下基于该源代码，适用于 MAUI。经过测试。

安卓：

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-Forms 代码中调用。需要使用Device.BeginInvokeOnMainThread。）

---

iOS：

...待定...

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

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

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

iOS - 未测试。