Cela fait maintenant 6 mois que je n’ai pas posté d’article sur mon blog et plus d’un an qu’un article autour de l’environnement Windows n’a pas vu le jour. Je vous propose aujourd’hui de corriger le tir en vous proposant un nouvel article dans le lequel nous verrons comment proposer aux utilisateurs de vos applications UWP deux thèmes :

• un thème clair (également appelé light theme) ;
• une thème sombre (également appelé dark theme).

Thème clair et thème sombre

Avant de voir les détails d’implémentation, je vous propose de revenir sur la notion de thème clair et thème sombre. Disponible notamment sur d’autres systèmes et notamment Android sous le nom de “thème nuit”, la notion de thème clair et thème sombre est quelque chose qui tient à coeur aux utilisateurs de Windows et ceux depuis Windows Phone 7.

En effet, historiquement, sur Windows Phone 7, il était possible de choisir le thème de son téléphone (sombre ou clair) et, en fonction du niveau d’intégration des applications, celles-ci devaient automatiquement s’aligner sur le thème du téléphone et basculer d’un thème à un autre. Pour faire très très simple, les thèmes présentent les caractéristiques suivantes :

• le thème sombre : texte blanc sur fond noir ;
• le thème clair : texte noir sur fond clair.

A noter que sur les terminaux Windows 10, il est toujours possible de changer entre les deux thèmes comme en témoigne la capture d’écran suivante :

Implémenter le thème clair et le thème sombre dans son application mobile

Dans la suite de cet article, nous allons donc voir comment implémenter la notion de thème clair et de thème sombre au sein d’une application UWP.

Comprendre où est mis en place le thème

Avant de débuter quoi à mettre les mains dans le code, il me semble important de vous compreniez où, par défaut, est mise en place le thème dans une application UWP.

En réalité, tout se passe au niveau de la classe App et plus précisément dans le XAML de celle-ci. Aussi, si vous ouvrez le fichier App.xaml, vous devriez y trouver le code suivant :

<Application
  x:Class="MonApp"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  RequestedTheme="Light"
>

</Application>

Vous remarquerez l’attribut XML RequestedTheme qui prend pour valeur Light. C’est donc que le thème de votre application (thème clair par défaut) est mis en place.

Aussi si mon application est composé de l’écran suivant :

<StackPanel
  Orientation="Vertical"
  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
>
  <TextBlock
    Text="Lorem ipsum"
    Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
  />
</StackPanel>

l’arrière plan du StackPanel et la couleur du Textblock respecteront les guidelines du thème clair comme en témoigne la capture d’écran suivante :

Dès lors que j’affecte la valeur Dark à l’attribut RequestedTheme, les éléments changeront de couleur pour s’adapter au thème sombre comme en témoigne la capture d’écran ci-dessous :

Changer le thème de l’application dynamiquement

S’il est possible de changer le thème utilisé dans l’application via un attribut XML, vous vous doutez bien que c’est également faisable via la C#. Pour ça, il convient de supprimer l’attribut XML RequestedTheme et de se rendre dans le fichier App.xaml.cs et plus précisément au niveau du constructeur de classe pour forcer l’utilisation d’un thème :

public App()
{
  RequestedTheme = ApplicationTheme.Light;
  
  //suite du code
  //...
}

Une fois de plus, vous avez le choix entre les valeurs Light et Dark. Dès lors, il devient très simple de stocker le thème souhaité par l’utilisateur dans des préférences utilisateurs et de configurer l’application avec le bon thème au démarrage de l’application.

Personnaliser les couleurs du thème

Les couleurs proposées par défaut par Windows pour le thème sombre et le thème clair ne vous plaise pas forcément, aussi, je vous propose de voir comment il est possible de personnaliser entièrement les couleurs utilisées dans les différents thèmes pour, dans notre cas, personnaliser l’arrière plan de l’application ainsi que la couleur du texte.

La première étape consiste à créer deux dictionnaires de ressources : l’un qui contiendra les éléments du thème clair et l’autre qui contiendra les éléments du thème sombre. Dans le cadre des applications que je développe, j’ai pris l’habitude d’appeler mes deux dictionnaires ThemeDark.xaml et ThemeLight.xaml et de les déposer dans le dossier Resourcess de mon projet.

Il convient maintenant de déclarer ces deux dictionnaires de ressources en tant que… ressources ;) dans au niveau du fichier App.xaml du projet en précisant la clef Light et Dark en l’associant au bon fichier :

<Application
  x:Class="MonApp"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary
          x:Key="Light"
          Source="/Resources/ThemeLight.xaml"
        />
        <ResourceDictionary
          x:Key="Dark"
          Source="/Resources/ThemeDark.xaml"
        />
      </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Vous pouvez ensuite dans vos fichiers définir des couleurs différentes pour une même clef :

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <SolidColorBrush 
    x:Key="Foreground" 
    Color="Black" 
  />

  <SolidColorBrush
    x:Key="Background"
    Color="White"
  />
</ResourceDictionary>

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <SolidColorBrush 
    x:Key="Foreground" 
    Color="White" 
  />

  <SolidColorBrush
    x:Key="Background"
    Color="Black"
  />
</ResourceDictionary>

Finalement, il convient dans les layout XAML de l’application d’appliquer les couleurs définies via les clefs :

<Page
  x:Class="MonApp.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
  <StackPanel
    Orientation="Vertical"
    Background="{StaticResource Background}"
  >
    <TextBlock
      Text="Lorem ipsum"
      Foreground="{StaticResource Foreground}"
    />
  </StackPanel>
</Page>

En fonction du thème sélectionné, le rendu sera alors automatiquement adapté comme en témoigne les captures d’écran suivantes :