Thème clair et sombre pour mon application Maui Blazor

Question

Je voudrais implémenter les thèmes clair et sombre à l'intérieur de mon application Maui Blazor. Comme vous le savez, Blazor n'est rien d'autre que de l'Html et du Css, je peux donc facilement implémenter un thème sombre et clair pour le contenu de mon application (grâce à une simple classe .dark ajoutée à la balise html).

Le problème que je rencontre concerne la partie supérieure et inférieure de l'application Maui.

Laissez-moi vous montrer par un exemple.

Version Android

Version iOS

Les images ci-dessus vous montrent la situation actuelle : à gauche, le thème clair et à droite, le thème sombre. Comme vous pouvez le voir, le thème sombre pose problème pour les sections supérieure et inférieure (seule la section supérieure pose problème pour la version iOS).

Ce que j'aimerais réaliser : les sections supérieure et inférieure devraient être colorées de la même manière que le contenu de la page:

• #292929 pour le thème sombre
• #FFFFFF pour le thème clair

Quelque chose comme sur l'image ci-dessous : lorsque vous basculez vers le thème sombre, tout est coloré.

Je n'ai aucune idée de comment réaliser cela pour Maui Blazor et je n'ai aucune expérience avec Xamarin.

Pouvez-vous me pointer dans la bonne direction s'il vous plaît ?

Comme vous le savez probablement, BlazorWebView vous permet d'héberger une application web Blazor directement dans l'application .NET MAUI.

Answer 1

D'ici un mois ou deux, il devrait devenir possible de faire cela via StatusBarEffect et NavigationBarEffect dans MAUI Community Toolkit. Discussion ici - pour Xamarin Toolkit.

Ces effets se trouvent actuellement dans la branche xamarin.develop de Xamarin.Community.Toolkit. La modification sera également fusionnée dans Maui Toolkit, je ne suis pas sûr de la date exacte.

Ci-dessous est basé sur ce code source, adapté pour fonctionner avec MAUI. Testé.

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);
            // La barre fine en haut de l'écran Android.
            Window.SetStatusBarColor(color.ToNative());
            // La barre plus épaisse en bas de l'écran Android.
            Window.SetNavigationBarColor(color.ToNative());

        }
    }

}

Cela définit les couleurs lorsque l'application démarre. Les effets contiendront la logique supplémentaire nécessaire pour définir ces couleurs de manière dynamique. (Jusqu'à ce que ces effets existent, vous pourriez enregistrer une valeur dans le stockage persistant, forcer votre application à redémarrer, lire ce drapeau pour savoir quelle couleur appliquer. OU vous pouvez créer un service de dépendance dans Android, à appeler depuis le code X-Forms. Vous devrez utiliser Device.BeginInvokeOnMainThread.)

---

iOS:

...À déterminer...

Il est possible de voir comment définir la couleur de la barre d'état dans ShaXam/iOS/StatusBarStyleManager/.

Les lignes essentielles sont celles-ci (je pense):

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

GetCurrentViewController().SetNeedsStatusBarAppearanceUpdate();

iOS - Non testé.