Gestion des modes clair et sombre avec .NET MAUI

Apprenez à adapter la configuration d’apparence de vos applications .NET MAUI (thème système) pour afficher le mode clair ou sombre en fonction des préférences de l’utilisateur.

Généralement, nos appareils mobiles ont une option de configuration de l’apparence du système (thème du système) qui nous permet de décider si nous le préférons en mode clair ou sombre. Celle-ci définit généralement le jeu de couleurs sur lequel sera basé l’aspect graphique du logiciel de notre appareil. (Bien sûr, il existe des applications qui conservent leur apparence d’origine sans modifier les paramètres par défaut de l’appareil.)

Maintenant, imaginez que l’application que vous développez dispose de la flexibilité nécessaire pour adopter l’apparence que votre utilisateur a configurée sur son appareil ! 😍 Ce serait formidable car vous pourriez accommoder l’utilisateur afin qu’il puisse voir votre application dans son apparence préférée et améliorer son expérience, et en même temps, vous pourriez créer une application suffisamment conviviale pour ces cas !

Dans cet article, nous allons apprendre à adapter nos applications à l’apparence (thème système) configurée sur l’appareil avec .NET MAUI en quelques étapes très simples !

Pour commencer, je vais diviser le message en sous-thèmes suivants :

• Réglage de nos commandes d’application pour les modes clair et sombre
• Obtenir et définir le thème utilisateur

Tout d’abord… 🔧 Compatibilité de la plateforme

Il est important que vous preniez en compte les versions des plates-formes qui prennent en charge ces modifications :

Réglage de nos commandes d’application pour les modes clair et sombre

L’extension de balisage AppThemeBinding nous permet de spécifier un ensemble de ressources pour les modes clair et sombre, que notre application pourra ensuite identifier et appliquer en fonction du thème (apparence) choisi dans le système.

Plus en détail, en attribuant cette extension de balisage, nous pouvons attribuer à tous les contrôles dont nous avons besoin les valeurs que prendront leurs propriétés en fonction du mode d’apparence configuré sur notre appareil.

Pour ce faire, l’AppTheme Binding est composé des propriétés suivantes :

• Léger: Reçoit la valeur que l’application présentera en mode clair. Le type de valeur qu’il reçoit sera lié aux propriétés sur lesquelles vous travaillez. Par exemple, si vous travaillez avec la propriété Background, vous devez envoyer une valeur Color, mais si vous travaillez avec la propriété ImageSource, vous devez envoyer une Image comme valeur.
• Sombre: Reçoit la valeur que l’application présentera en mode sombre. Le type de valeur qu’il reçoit se comporte de la même manière qu’expliqué au point précédent.

Maintenant, connaissons la structure à appliquer :

Voyons maintenant un exemple :

<Label BackgroundColor= "{ AppThemeBinding
        Light=Pink Dark=Blue } " />

⚠ Important: Nous pouvons également les implémenter à l’aide de Styles, comme je le montre ci-dessous :

<Style x:Key="LayoutStyle " TargetType="Layout ">
  <Setter Property="BackgroundColor "
Value="{AppThemeBinding Light=Pink, Dark=Blue} " />
  <!-- Your Setters here …→
</Style>

Si vous voulez en savoir plus sur les styles, vous pouvez entrer ici.

Obtenir et définir le thème du système (mode apparence)

Nous allons maintenant apprendre deux points très importants sur la façon d’obtenir et de définir l’apparence par défaut (thème) de notre application.

Apparence actuelle du système

Commençons par obtenir l’apparence actuelle du système. Pour le savoir, il suffit d’utiliser la propriété Application.RequestedTheme. Cette propriété renvoie un membre d’énumération AppTheme, composé des valeurs suivantes :

Et enfin, un exemple de ligne de code :

AppTheme currentTheme =  (AppTheme)Application.Current.RequestedTheme;

Définir le thème du système

Continuons avec la définition du thème système. Nous avons également la possibilité de définir l’apparence (thème) que notre application aura comme déterminé, quelle que soit la configuration du système.

Par exemple, voyons comment configurer notre application pour qu’elle soit toujours en mode sombre.

Application.Current.UserAppTheme = AppTheme.Dark;

Enfin, nous avons un exemple de la même application mais avec le mode clair et sombre !

🗒 Cette image a été tirée de la documents officiels.

Conclure

Et.. Voila! Avec ces étapes simples, nous pouvons gérer les apparences de notre application !

Références: https://docs.microsoft.com/en-us/dotnet/maui/user-interface/system-theme-changes