Implémenter le thème sombre

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser les thèmes dans Compose.
Jeu de couleurs - Material Design 3 →

Figure 1. le thème sombre.

Le thème sombre est disponible sur Android 10 (niveau d'API 29) ou version ultérieure. Il présente les avantages suivants:

  • Réduit considérablement la consommation d'énergie, en fonction de la technologie d'écran de l'appareil.
  • Améliore la visibilité pour les utilisateurs souffrant d'une déficience visuelle et ceux sensibles à la lumière vive.
  • Facilite l'utilisation d'un appareil dans des conditions de faible luminosité.

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

Vous pouvez activer le thème sombre de trois manières différentes sous Android 10 ou version ultérieure:

  • Utilisez le paramètre système en accédant à Paramètres > Affichage > Thème pour activer le thème sombre.
  • Utilisez le bloc "Réglages rapides" pour changer de thème depuis la barre de notification, 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. Il est possible que d'autres appareils ne soient pas compatibles avec 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.

Assurer la compatibilité avec 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 disponible dans res/values/styles.xml) de sorte qu'il hérite 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 permet de lier le thème principal de l'application aux indicateurs du mode Nuit contrôlés par le système et d'attribuer à l'application un thème sombre par défaut lorsqu'il est activé.

Thèmes et styles

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

Deux attributs de thème sont les plus importants pour le thème sombre:

  • ?android:attr/textColorPrimary: couleur de texte à usage général. Il est presque noir pour le thème clair et presque blanc avec le thème sombre. 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 son système de thématisation des 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. Les options suivantes sont recommandées:

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

Ces options sont directement mappées aux modes AppCompat.DayNight:

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

Forcer le mode sombre

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

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

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

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

Désactiver l'option "Forcer le mode sombre" sur une vue

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

Contenu Web

Pour en savoir plus sur l'utilisation des thèmes sombres dans le contenu Web, consultez Assombrir le contenu Web dans WebView. Pour obtenir un exemple de thème sombre appliqué à une WebView, consultez la démonstration de WebView sur GitHub.

pour réussir votre lancement

Les sections suivantes décrivent les bonnes pratiques à suivre 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 de 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 chargé d'appliquer le style d'affichage approprié.

Widgets et affichages de notifications personnalisés

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

Voici quelques pièges courants à éviter:

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

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

Écrans de lancement

Si votre application dispose d'un écran de lancement 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, elle déclenche une modification de la configuration uiMode. Cela signifie que les activités sont automatiquement recréées.

Dans certains cas, vous souhaiterez peut-être qu'une application gère le changement de configuration. Par exemple, vous pouvez retarder un changement de configuration en raison de la lecture d'une vidéo.

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

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

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

Pour vérifier le thème actuel, les applications peuvent exécuter du code comme suit:

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;
}