Mode sombre — qu'est-ce que c'est, thème d'interface sombre dans les applications mobiles

Qu'est-ce que le Mode sombre et pourquoi est-il nécessaire ?

Mode sombre est un jeu de couleurs dans lequel l'arrière-plan de l'écran est sombre (généralement #121212 dans Android, #1C1C1E dans iOS), tandis que le texte et les éléments d'interface sont clairs. Contrairement à une simple inversion des couleurs, un Mode sombre de qualité utilise une palette soigneusement sélectionnée : fond gris foncé au lieu de noir pur (réduit l'effet de halo), saturation réduite des couleurs d'accent et ombres douces. La prise en charge système du Mode sombre est apparue dans iOS 13 (septembre 2019) et Android 10 (septembre 2019).

La principale raison de son adoption est le confort de l'utilisateur. En cas de faible luminosité (le soir, dans l'obscurité), un écran blanc brillant provoque une fatigue oculaire et peut déclencher des maux de tête. Le Mode sombre réduit la luminosité de l'écran sans sacrifier la lisibilité. Pour les utilisateurs photophobes ou sensibles à la lumière, le thème sombre n'est pas une option mais la seule façon d'utiliser une application confortablement. Selon Android Developers, plus de 30% des utilisateurs d'Android gardent le thème sombre activé en permanence.

Le Mode sombre économise la batterie sur les écrans OLED. Contrairement au LCD, où le rétroéclairage est toujours allumé, les pixels OLED s'illuminent eux-mêmes. Une couleur sombre signifie que le pixel est éteint — la consommation d'énergie diminue. Selon Google (Android Developers Blog, 2019), sur un Pixel avec écran OLED, le Mode sombre à 100% de luminosité réduit la consommation d'énergie de 60% par rapport au thème clair. Sur les écrans LCD, l'économie est minime (environ 3–5%) car le rétroéclairage de la matrice fonctionne indépendamment de la couleur du pixel.

Histoire du Mode sombre dans les systèmes d'exploitation mobiles

La prise en charge système du Mode sombre a traversé plusieurs étapes. iOS 13 (2019) a introduit un thème sombre global via UIUserInterfaceStyle. Android 10 (2019) a ajouté Force Dark Mode pour les applications sans thème sombre propre. Android 12 (2021) avec Material You a commencé à générer automatiquement une palette sombre à partir des fonds d'écran. iOS 15 (2021) a étendu l'API pour Safari et le contenu web. Selon StatCounter (2026), 82% des 100 principales applications de l'App Store et de Google Play prennent en charge le Mode sombre.

Mode sombre dans iOS : API Swift et support UIKit

L'API Mode sombre iOS est basée sur le protocole UITraitEnvironment. Chaque UIViewController et UIView possède la propriété traitCollection.userInterfaceStyle, qui peut être .unspecified, .light ou .dark. Lorsque le thème système change, iOS appelle la méthode traitCollectionDidChange(_:). Le développeur doit mettre à jour les couleurs dans cette méthode, ou utiliser des couleurs dynamiques (UIColor(dynamicProvider:)) qui basculent automatiquement entre les palettes claire et sombre.

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// Forcer l'activation du Mode sombre
window.overrideUserInterfaceStyle = .dark

Les couleurs dynamiques — la meilleure façon d'implémenter le Mode sombre dans iOS. UIColor(named:) charge automatiquement différentes valeurs du catalogue d'actifs pour les apparences .light et .dark. Il suffit de définir une couleur dans Assets.xcassets avec deux variantes (Any Appearance + Dark Appearance), et UIKit sélectionnera automatiquement la bonne. Les couleurs système dynamiques (UIColor.systemBackground, .label, .secondaryLabel) prennent déjà en charge le Mode sombre et changent automatiquement.

SwiftUI et Mode sombre

SwiftUI prend en charge le Mode sombre nativement. Toutes les couleurs et modifications standard (Color.primary, .background, Color(UIColor.systemBackground)) s'adaptent automatiquement. Pour les couleurs personnalisées, utilisez Color(uiColor:) avec un UIColor dynamique ou la variable d'environnement @Environment(\.colorScheme) pour une vérification explicite du thème. La vue SwiftUI se redessine automatiquement lors du changement de thème, sans avoir à appeler traitCollectionDidChange.

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Mode sombre")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Mode sombre dans Android : API Kotlin et AppCompat

Le Mode sombre Android est implémenté via la bibliothèque AppCompat et le thème Theme.AppCompat.DayNight. Le jour, le thème clair est utilisé, la nuit — le sombre. L'activation forcée est définie via AppCompatDelegate.setDefaultNightMode() : MODE_NIGHT_YES (sombre), MODE_NIGHT_NO (clair), MODE_NIGHT_FOLLOW_SYSTEM (système). Les ressources sont divisées en claires (res/values/styles.xml) et sombres (res/values-night/styles.xml).

// Forcer l'activation du thème sombre
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Définir avant super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Déterminer le thème actuel
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Enregistrer le mode nuit dans AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode est une fonctionnalité système d'Android 10+ qui inverse automatiquement les couleurs des applications sans support de thème sombre. Elle est activée via les options développeur ou via l'attribut android:forceDarkAllowed="true" dans le thème. Il s'agit d'une solution temporaire : pour la production, vous devez implémenter votre propre palette sombre via values-night, sinon la qualité visuelle sera médiocre (icônes inversées, couleurs difficiles à lire).

Material You Dynamic Themes

Material You (Android 12+) génère automatiquement 5 couleurs clés à partir du fond d'écran de l'appareil : primary, secondary, tertiary, neutral, neutralVariant. Pour chaque couleur, des palettes claire et sombre sont créées. Le développeur utilise des attributs : ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Le système sélectionne lui-même la variante pour le thème actuel. Dynamic Color est pris en charge sur Android 12+ avec Material Design 3 (composant com.google.android.material:material).

// values/themes.xml — thème clair
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — thème sombre
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Conception du thème sombre : règles de contraste et de couleur

La conception du Mode sombre n'est pas une simple inversion des couleurs. Google Material Design recommande d'utiliser du gris foncé (#121212) au lieu du noir pur. Le noir pur (#000000) crée un contraste trop élevé avec le texte blanc, provoquant un effet de halo (auréole autour des lettres). Le niveau d'élévation des éléments est exprimé par la couleur : plus l'élément est élevé, plus son fond est clair. Une carte sur le fond — #1E1E1E, dialogue — #2D2D2D, panneau de navigation — #383838.

Le contraste des couleurs dans le Mode sombre doit être inférieur à celui du Mode clair. Material Design recommande : texte primaire — blanc (#FFFFFF) avec une opacité de 87%, secondaire — 60%, désactivé — 38%. Les couleurs d'accent doivent être moins saturées : si dans le thème clair primary = #6200EE, alors dans le sombre — #BB86FC (violet clair et doux). Selon WCAG 2.1, un contraste minimum de 4.5:1 pour le texte normal doit être maintenu dans les deux thèmes.

Images et icônes nécessitent un traitement séparé dans le thème sombre. Les icônes avec transparence doivent être recolorées en couleurs claires. Les photos avec des fonds brillants peuvent éblouir — il est recommandé de réduire la luminosité de 20 à 30% ou d'ajouter une superposition semi-transparente. Pour les logos et les éléments de marque, utilisez la version pour fond sombre. Le catalogue d'actifs iOS et VectorDrawable Android prennent en charge des ressources séparées pour les thèmes clair et sombre.

Mode sombre vs Mode clair : avantages et inconvénients

Le choix entre les thèmes dépend des conditions d'utilisation, du type de contenu et des préférences de l'utilisateur. Une étude du Nielsen Norman Group (2020) a montré : sous un éclairage normal, le Mode clair offre une vitesse de lecture de 15 à 20% supérieure. Cependant, dans des conditions de faible luminosité, le Mode sombre réduit la fatigue oculaire et améliore la lisibilité. Pour les interfaces avec de grandes quantités de texte (articles, documents), le Mode clair est généralement préférable.

La consommation d'énergie est un argument clé pour le Mode sombre sur OLED. Selon Google (2019), YouTube en thème sombre sur un écran OLED consomme 43% moins d'énergie qu'en thème clair. Google Maps — 32%. Plus l'interface est lumineuse et plus le niveau de luminosité de l'écran est élevé, plus les économies sont importantes. Sur les écrans LCD, les économies ne dépassent pas 5%. Pour les utilisateurs qui travaillent beaucoup avec l'application en extérieur sous un soleil éclatant, le Mode clair reste la seule option lisible.

Recommandations d'IT Sectr — nous implémentons les deux thèmes avec des options de bascule : système (suivre le système), sombre, clair. La bascule automatique ne doit pas être la seule option — un utilisateur peut vouloir le thème sombre pendant la journée (pour les migraines) ou le thème clair la nuit (pour la lecture). Dans nos projets, nous ajoutons un sélecteur de thème dans les paramètres du profil et mémorisons le choix. Pour les applications avec du contenu premium (photos, vidéos), un aperçu du thème avant application est recommandé.