Светлая и темная тема для моего приложения Maui Blazor

Question

Я хотел бы реализовать светлую и темную тему в моем приложении Maui Blazor. Как вы знаете, Blazor - это не что иное, как Html и Css, поэтому я легко реализую темную и светлую тему для содержимого моего приложения (благодаря простому классу .dark, добавленному в тег html).

Проблема, с которой я столкнулся, касается верхней и нижней части приложения.

Позвольте показать вам на примере.

На картинке выше показана текущая ситуация: слева - светлая тема, а справа - темная тема. Как видите, темная тема проблематична для верхнего и нижнего разделов (точных терминов я не знаю).

Чего бы я хотел добиться: верхняя и нижняя части должны быть окрашены так же, как и содержимое страницы (#292929).

Примерно как на картинке ниже: при переходе на темную тему все окрашивается.

Я понятия не имею, как добиться этого для Maui Blazor, и у меня нет опыта работы с Xamarin.

Не могли бы вы указать мне правильное направление, пожалуйста?

Answer 1

В течение следующего месяца или двух это должно стать возможным сделать через StatusBarEffectа также NavigationBarEffectв наборе инструментов сообщества MAUI . Обсуждение здесь — для Xamarin Toolkit.

Эти эффекты в настоящее время находятся в ветке xamarin.developиз Xamarin.Community.Toolkit. Это изменение также будет объединено с 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 — не тестировалось.