Le mode sombre est devenu une fonctionnalité populaire dans de nombreuses applications mobiles en raison de ses avantages pour la lecture dans des environnements peu éclairés, ainsi que de son impact positif sur la consommation de la batterie, surtout pour les écrans OLED. L’intégration du mode sombre dans une application mobile n’est pas seulement une tendance esthétique, mais aussi une amélioration de l’expérience utilisateur. Voici les étapes et les meilleures pratiques pour intégrer un mode sombre dans votre application mobile, que ce soit sur Android, iOS ou avec des frameworks multiplateformes.
1. Comprendre les principes du mode sombre
Le mode sombre consiste à remplacer les couleurs claires (comme les fonds blancs) par des couleurs plus sombres (comme le noir ou les gris foncés) pour créer une interface plus agréable dans des environnements de faible luminosité. Cela permet aussi de réduire la consommation d’énergie sur les écrans OLED, qui consomment moins de batterie lorsqu’ils affichent des pixels noirs ou foncés.
Voici les principes clés du mode sombre :
- Fond sombre, texte clair : Le texte doit être suffisamment contrasté pour assurer une lisibilité optimale, tout en étant doux pour les yeux.
- Couleurs modifiées : Les couleurs vives ou saturées doivent être atténuées pour un meilleur confort visuel.
- Compatibilité avec les autres éléments de l’UI : Tous les éléments de l’interface (boutons, menus, barres d’outils, etc.) doivent être ajustés pour s’intégrer harmonieusement au mode sombre.
2. Intégration du mode sombre dans Android
Sur Android, Google a introduit un support natif du mode sombre dans Android 10 et au-delà. Voici comment l’intégrer dans votre application Android.
a. Détecter le mode sombre
Android permet de détecter automatiquement si l’utilisateur a activé le mode sombre via les paramètres de l’appareil. Vous pouvez gérer ce changement en utilisant les ressources système.
xmlCopierModifier<!-- Dans le fichier styles.xml -->
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Le thème par défaut sera automatiquement en mode sombre ou clair selon la préférence de l'utilisateur -->
</style>
</resources>
b. Adapter les ressources aux thèmes
Les ressources de votre application (comme les couleurs, les images et les arrière-plans) doivent être adaptées pour fonctionner en mode sombre.
- Définir des couleurs pour le mode clair et sombre : Créez un fichier
colors.xmlpour chaque thème (clair et sombre).
xmlCopierModifier<!-- colors.xml (mode clair) -->
<color name="background_color">#FFFFFF</color>
<color name="text_color">#000000</color>
<!-- colors.xml (mode sombre) -->
<color name="background_color">#121212</color>
<color name="text_color">#FFFFFF</color>
Dans res/values/colors.xml, et res/values-night/colors.xml, vous définissez des couleurs spécifiques pour chaque mode.
c. Utiliser les thèmes et styles dynamiques
Le système Android permet de basculer dynamiquement entre les thèmes en fonction de l’état du mode sombre. Pour cela, vous pouvez appliquer les thèmes DayNight à votre activité ou application.
xmlCopierModifier<application
android:theme="@style/Theme.MaterialComponents.DayNight">
...
</application>
d. Testez la bascule dynamique
Android permet également de changer dynamiquement entre les modes sombre et clair au sein de l’application sans redémarrer l’application. Il suffit d’utiliser la méthode suivante pour appliquer un changement de thème à la volée.
javaCopierModifierAppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES); // Mode sombre
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO); // Mode clair
3. Intégration du mode sombre dans iOS
Le mode sombre a été introduit dans iOS 13, avec un support natif dans le système. L’intégration est relativement simple grâce aux outils fournis par Apple.
a. Détecter le mode sombre
iOS permet de détecter automatiquement si l’utilisateur a activé le mode sombre via les paramètres de l’appareil en utilisant les traits d’apparence du système.
swiftCopierModifierif traitCollection.userInterfaceStyle == .dark {
// Mode sombre activé
} else {
// Mode clair activé
}
b. Utiliser les couleurs dynamiques
Apple recommande l’utilisation des couleurs dynamiques qui s’adaptent automatiquement au mode sombre ou clair. Les couleurs peuvent être définies dans le fichier Assets.xcassets ou dans le code Swift.
Dans Assets.xcassets, vous pouvez définir des couleurs dynamiques :
- Créez une couleur dans Assets et définissez une couleur pour le mode clair et une pour le mode sombre.
- Exemple d’utilisation de couleurs dynamiques :
swiftCopierModifierlet backgroundColor = UIColor(named: "background_color")
let textColor = UIColor(named: "text_color")
Les couleurs définies dans les assets s’adapteront automatiquement au mode sombre ou clair, sans qu’il soit nécessaire de gérer des fichiers séparés comme sur Android.
c. Appliquer les thèmes dynamiquement
iOS ajuste automatiquement l’interface en fonction du mode sombre activé. Vous pouvez également forcer un changement en modifiant les propriétés de votre interface utilisateur.
swiftCopierModifieroverride func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if self.traitCollection.userInterfaceStyle == .dark {
// Appliquez le thème sombre
} else {
// Appliquez le thème clair
}
}
d. Gérer les images pour le mode sombre
Les images doivent être également adaptées au mode sombre, car certaines images peuvent ne pas apparaître aussi bien en mode sombre. Utilisez des images optimisées pour le mode sombre ou utilisez des images adaptées dans les Assets pour chaque mode.
4. Intégration du mode sombre dans les applications multiplateformes
Si vous utilisez un framework multiplateforme comme Flutter ou React Native, il existe également des moyens d’ajouter le mode sombre de manière native.
a. Flutter
Flutter supporte le mode sombre de manière native avec son système de thème. Pour activer le mode sombre, vous pouvez utiliser les options suivantes dans votre application Flutter :
dartCopierModifierThemeData(
brightness: Brightness.dark, // Pour le mode sombre
);
ThemeData(
brightness: Brightness.light, // Pour le mode clair
);
Vous pouvez également gérer la détection automatique du mode sombre comme suit :
dartCopierModifierfinal Brightness brightness = MediaQuery.of(context).platformBrightness;
final bool isDarkMode = brightness == Brightness.dark;
b. React Native
Dans React Native, vous pouvez utiliser le module Appearance pour détecter le mode sombre ou clair et ajuster le thème de votre application.
javascriptCopierModifierimport { Appearance } from 'react-native';
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
// Mode sombre
} else {
// Mode clair
}
Ensuite, vous pouvez utiliser ce paramètre pour appliquer un thème spécifique, en modifiant les couleurs et l’interface de votre application.
5. Tester le mode sombre
Tester l’intégration du mode sombre est essentiel pour s’assurer que tous les éléments de votre application fonctionnent correctement dans les deux modes. Assurez-vous de vérifier :
- La lisibilité du texte et le contraste.
- L’adaptabilité des images et des icônes.
- L’intégration harmonieuse de l’interface.
Conclusion
L’intégration du mode sombre dans une application mobile améliore l’expérience utilisateur, surtout en réduisant la fatigue oculaire et en économisant de la batterie. En utilisant les outils natifs d’Android et d’iOS ou des frameworks comme Flutter et React Native, il est relativement simple d’ajouter cette fonctionnalité à votre application. Assurez-vous de bien tester votre application dans les deux modes pour garantir une interface fluide et agréable.
