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 la thématisation dans Compose.

Figure 1. Thème sombre

Le thème sombre est disponible sur Android 10 (niveau d'API 29) ou version ultérieure. Elle 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 malvoyants et ceux sensibles à la lumière vive.
  • Facilite l'utilisation de l'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.

Il existe trois façons d'activer le thème sombre sur Android 10 ou version ultérieure:

  • Utilisez les paramètres système en accédant à Settings > Display > Theme (Paramètres > Affichage > Thème) pour activer le thème sombre.
  • Utilisez le bloc "Réglages rapides" pour changer de thème à partir de 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 obtenir des instructions sur l'application d'un thème sombre à un contenu Web à l'aide d'un composant WebView, consultez la section 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 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 Material Components:

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

Cela associe le thème principal de l'application aux indicateurs du mode Nuit contrôlés par le système et attribue à l'application 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 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 quasi noir avec le thème clair et presque blanc 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 des composants Material Design, car son système de thématisation 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.

Modifier les thèmes 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:

  • Faible
  • Sombre
  • Valeur 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 propose 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.

Forcer le mode sombre analyse chaque vue de votre application sur le thème clair et applique automatiquement un thème sombre avant qu'il ne soit affiché à l'écran. Vous pouvez combiner l'implémentation forcée du mode sombre et l'implémentation native pour réduire le temps nécessaire à l'implémentation du thème sombre.

Les applications doivent activer Forcer 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 clairs fournis par le système et AndroidX, tels que Theme.Material.Light. Lorsque vous utilisez la fonctionnalité Forcer le mode sombre, testez soigneusement votre application et excluez les vues si nécessaire.

Si votre application utilise un thème sombre, tel que Theme.Material, le mode sombre forcée 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 de 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.

Bonnes pratiques

Les sections suivantes fournissent des 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 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 affichages de notifications personnalisés

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

Voici quelques écueils 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 lors de l'utilisation de la couleur de texte par défaut
  • 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, via le paramètre système ou via AppCompat, une modification de la configuration de uiMode est déclenchée. Cela signifie que les activités sont recréées automatiquement.

Dans certains cas, vous souhaiterez peut-être qu'une application gère le changement de configuration. Par exemple, vous pouvez vouloir retarder une modification de configuration pendant 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 la modification de la configuration de 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 connaître le thème actuel, les applications peuvent exécuter le code suivant:

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