![](https://developer.android.com/static/images/guide/topics/ui/look-and-feel/darktheme.png?authuser=9&hl=fr)
Le thème sombre est disponible sur Android 10 (niveau d'API 29) ou version ultérieure. Il contient les les avantages suivants:
- Réduit considérablement la consommation d'énergie de l'appareil, d'écran.
- Améliore la visibilité pour les utilisateurs malvoyants et ceux sensibles aux une 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, lorsqu'elle est activée.
- Sur les appareils Pixel, activez le mode Économiseur de batterie pour activer simultanément le thème sombre en temps réel. 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
, pour hériter d'un thème DayNight
:
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
Vous pouvez également utiliser le composant Material Components dark thème:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
Cela relie le thème principal de l'application aux indicateurs du mode Nuit contrôlés par le système et donne à 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 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 pour le thème sombre. Il contient désactivé.?attr/colorControlNormal
: couleur d'icône à usage général. Il contient désactivé.
Nous vous recommandons d'utiliser Material Design
Composants, car sa thématisation des couleurs
système, comme la sélection
?attr/colorSurface
et ?attr/colorOnSurface
, permet d'y 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 éléments suivants : sont les options recommandées:
- Léger
- Sombre
- Paramètre système par défaut (option par défaut recommandée)
Ces options sont directement mappées aux modes AppCompat.DayNight
:
Clair:
MODE_NIGHT_NO
Sombre:
MODE_NIGHT_YES
Paramètre système par défaut:
MODE_NIGHT_FOLLOW_SYSTEM
Pour changer de thème, procédez comme suit:
Pour les niveaux d'API 31 et supérieurs, utilisez
UiModeManager#setApplicationNightMode
pour indiquer au système le thème exécuté par votre application. Cela permet au système de faire correspondre le thème pendant l'écran de démarrage.Pour les niveaux d'API 30 et inférieurs, utilisez
AppCompatDelegate.setDefaultNightMode()
pour changer de thème.
Forcer le mode sombre
Android 10 propose Forcer le mode sombre, une fonctionnalité permettant aux développeurs de
implémenter rapidement un thème sombre sans définir explicitement de thème DayNight
.
La fonctionnalité Forcer le sombre analyse chaque vue de votre application avec un thème clair et applique un thème sombre automatiquement avant d'être dessinées à l'écran. Vous pouvez combiner Force Dark et l'implémentation native afin de réduire le temps nécessaire pour implémenter le dark web d'un thème.
Les applis 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 clairs fournis par AndroidX, tels que Theme.Material.Light
Lorsque vous utilisez
Forcer le mode sombre, tester minutieusement votre application et exclure des vues si nécessaire.
Si votre application utilise un thème sombre tel que Theme.Material
), le mode sombre n'est pas
appliquée. 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
L'option "Forcer le mode sombre" peut être contrôlée dans certaines vues à l'aide de la
Attribut de mise en page android:forceDarkAllowed
ou avec
setForceDarkAllowed()
Contenu Web
Pour plus d'informations sur l'utilisation des thèmes sombres dans le contenu Web, consultez Assombrir le Web dans WebView. Exemple de thème sombre : à une WebView, reportez-vous à la démonstration de WebView sur GitHub pour en savoir plus.
Bonnes pratiques
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 assurez-vous que toutes les vues que vous utilisez reflètent le thème de l'application hôte. En voici deux exemples : les notifications et les widgets de lanceur d'applications.
Notifications
Utilisez les modèles de notification fournis par le système, tels que MessagingStyle
. Ce
signifie que le système est chargé d'appliquer le bon style d'affichage.
Widgets et affichages de notifications personnalisés
Pour les widgets de lanceur d'applications ou si votre application utilise des vues personnalisées du contenu des notifications : testez le contenu avec 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 d'utiliser des attributs codés en dur. couleurs.
É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
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 par le biais des paramètres système ou d'AppCompat,
déclenche un uiMode
modification de configuration. 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. Pour Par exemple, vous pouvez retarder un changement 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 chaque
Activity
peut gérer le changement de configuration de uiMode
:
<activity
android:name=".MyActivity"
android:configChanges="uiMode" />
Lorsqu'une Activity
déclare qu'elle gère les modifications de configuration, son
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; }