Implémenter le thème sombre

Essayez la méthode Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les thèmes dans Compose.
Schéma de couleurs – Material Design 3 →

Figure 1. Thème sombre.

Le thème sombre est disponible sous Android 10 (niveau d'API 29) et les versions ultérieures. Il présente les avantages suivants :

  • Il réduit considérablement la consommation d'énergie, en fonction de la technologie d'écran de l'appareil.
  • Il améliore la visibilité pour les utilisateurs souffrant d'une déficience visuelle et ceux sensibles à la lumière vive.
  • Il permet d'utiliser plus facilement un appareil dans un environnement faiblement éclairé.

Le thème sombre s'applique à l'interface utilisateur Android et aux applications exécutées sur l'appareil.

Vous pouvez activer le thème sombre sous Android 10 et les versions ultérieures de trois manières :

  • Utilisez le paramètre système en accédant à Paramètres > Écran > Thème pour activer le thème sombre.
  • Utilisez le bouton Réglages rapides pour changer de thème depuis le volet de notifications, si cette option est activée.
  • Sur les appareils Pixel, activez le mode Économiseur de batterie pour activer le thème sombre en même temps. D'autres appareils peuvent ne pas prendre en charge ce comportement.

Pour savoir comment appliquer un thème sombre à du contenu Web à l'aide d'un composant WebView, consultez Assombrir le contenu Web dans WebView.

Prendre en charge le thème sombre dans votre application

Pour prendre en charge le thème sombre, définissez le thème de votre application (généralement situé dans res/values/styles.xml) de manière à hériter d'un thème DayNight :

<style name="AppTheme" parent="Theme.AppCompat.DayNight">

Vous pouvez également utiliser le thème sombre des composants Material :

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">

Cela lie le thème principal de l'application aux indicateurs de mode nuit contrôlés par le système et lui attribue un thème sombre par défaut lorsqu'il est activé.

Thèmes et styles

Évitez d'utiliser des couleurs codées en dur ou des icônes destinées à être utilisées avec un thème clair. Utilisez plutôt des attributs de thème ou des ressources qualifiées pour le mode nuit.

Deux attributs de thème sont particulièrement importants pour le thème sombre :

  • ?android:attr/textColorPrimary : couleur de texte à usage général. Elle est presque noire dans le thème clair et presque blanche dans les thèmes sombres. Elle contient un état désactivé.
  • ?attr/colorControlNormal : couleur d'icône à usage général. Elle contient un état désactivé.

Nous vous recommandons d'utiliser les composants Material Design, car leur système de thèmes de couleurs, tel que les attributs de thème ?attr/colorSurface et ?attr/colorOnSurface, permet d'accéder facilement aux couleurs appropriées. Vous pouvez personnaliser ces attributs dans votre thème.

Changer de thème dans l'application

Vous pouvez autoriser les utilisateurs à modifier le thème de l'application pendant son exécution. Voici les options recommandées :

  • Clair
  • Sombre
  • Paramètre système par défaut (option par défaut recommandée)

Ces options correspondent directement aux modes AppCompat.DayNight :

Pour changer de thème, procédez comme suit :

Forcer un thème sombre

Android 10 fournit Forcer un thème sombre, une fonctionnalité permettant aux développeurs d' implémenter rapidement un thème sombre sans définir explicitement un thème DayNight.

Forcer un thème sombre analyse chaque vue de votre application à thème clair et applique automatiquement un thème sombre avant qu'elle ne s'affiche à l'écran. Vous pouvez utiliser une combinaison de Forcer un thème sombre et d'implémentation native pour réduire le temps nécessaire à l'implémentation du thème sombre.

Les applications doivent activer Forcer un thème sombre en définissant android:forceDarkAllowed="true" dans le thème de l'activité. Cet attribut est défini sur tous les thèmes clairs fournis par le système et AndroidX, tels que Theme.Material.Light. Lorsque vous utilisez Forcer un thème sombre, testez votre application de manière approfondie et excluez les vues si nécessaire.

Si votre application utilise un thème sombre, tel que Theme.Material), Forcer un thème sombre n'est pas appliqué. De même, si le thème de votre application hérite d'un thème DayNight, Forcer un thème sombre n'est pas appliqué en raison du changement de thème automatique.

Désactiver Forcer un thème sombre sur une vue

Forcer un thème sombre peut être contrôlé sur des vues spécifiques avec l' android:forceDarkAllowed attribut de mise en page ou avec setForceDarkAllowed().

Contenu Web

Pour savoir comment utiliser des thèmes sombres dans du contenu Web, consultez Assombrir le contenu Web dans WebView. Pour obtenir un exemple de thème sombre appliqué à une WebView, consultez la démonstration WebView sur GitHub .

Bonnes pratiques

Les sections suivantes fournissent des bonnes pratiques pour implémenter des thèmes sombres.

Notifications et widgets

Pour les surfaces d'interface utilisateur que vous affichez sur l'appareil, mais que vous ne contrôlez pas directement, assurez-vous que toutes les vues que vous utilisez reflètent le thème de l'application hôte. Les notifications et les widgets du lanceur en sont deux exemples.

Notifications

Utilisez les modèles de notification fournis par le système, tels que MessagingStyle. Cela signifie que le système est responsable de l'application du style de vue approprié.

Widgets et vues de notification personnalisées

Pour les widgets du lanceur ou si votre application utilise des vues de contenu de notification personnalisées, testez le contenu avec les thèmes clair et sombre.

Voici quelques pièges courants à éviter :

  • Supposer que la couleur d'arrière-plan est toujours claire.
  • Coder en dur les couleurs du texte.
  • Définir une couleur d'arrière-plan codée en dur tout en utilisant la couleur de texte par défaut.
  • Utiliser une icône drawable de couleur statique.

Dans tous ces cas, utilisez des attributs de thème appropriés au lieu de couleurs codées en dur.

Écrans de démarrage

Si votre application comporte un écran de démarrage personnalisé, vous devrez peut-être le modifier pour qu'il reflète le thème sélectionné.

Supprimez toutes les couleurs codées en dur, telles que les couleurs d'arrière-plan définies par programmation sur le blanc. Utilisez plutôt l'attribut de thème ?android:attr/colorBackground.

Modifications de configuration

Lorsque le thème de l'application change, que ce soit via le paramètre système ou AppCompat, cela déclenche une uiMode modification de configuration. Cela signifie que les activités sont automatiquement recréées.

Dans certains cas, vous pouvez souhaiter qu'une application gère la modification de configuration. Par exemple, vous pouvez vouloir retarder une modification de configuration, car une vidéo est en cours de lecture.

Une application peut gérer l'implémentation du thème sombre en déclarant que chaque Activity peut gérer la modification de configuration uiMode :

<activity
    android:name=".MyActivity"
    android:configChanges="uiMode" />

Lorsqu'un Activity déclare qu'il gère les modifications de configuration, sa onConfigurationChanged() méthode est appelée en cas de changement de thème.

Pour vérifier le thème actuel, les applications peuvent exécuter un code comme celui-ci :

Kotlin

val currentNightMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
when (currentNightMode) {
    Configuration.UI_MODE_NIGHT_NO -> {} // Night mode is not active, we're using the light theme.
    Configuration.UI_MODE_NIGHT_YES -> {} // Night mode is active, we're using dark theme.
}

Java

int currentNightMode = configuration.uiMode & Configuration.UI_MODE_NIGHT_MASK;
switch (currentNightMode) {
    case Configuration.UI_MODE_NIGHT_NO:
        // Night mode is not active, we're using the light theme
        break;
    case Configuration.UI_MODE_NIGHT_YES:
        // Night mode is active, we're using dark theme
        break;
}