Dark Mode et confort visuel

1) Pourquoi un thème sombre

Confort des yeux en basse luminosité, moins d'éblouissement et « flashes lumineux ».
Énergie : sur OLED/AMOLED, les écrans sombres dépensent moins de batterie.
Focus sur les données : accent mis sur le contenu plutôt que sur l'arrière-plan.
Attentes de l'utilisateur : l'indicateur système 'prefers-color-scheme' est la norme de facto.

2) Principes

1. Fond gris foncé> noir pur pour les surfaces UI (meilleure lisibilité et gradation).
2. Contraste sur le contenu : pas « blanc sur noir », mais des nuances douces pour de longs textes.
3. « Luminosité » prudente : les éclairages/accents sont muets mais discernables.
4. Profondeur de l'ombre ≠ : nous travaillons avec une ombre claire/floue, pas avec un contraste brusque.
5. Disponibilité : WCAG AA (minimum), focus visible et états compréhensibles.
6. Les paramètres système sont primaires : auto-commutation et « mouvement réduit ».

3) Palette et jetons (exemple)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• Les accents en mode foncé sont de + 8 à 12 % plus clairs que dans le mode lumineux.
• Utilisez les niveaux de gris (4-5 étapes) en évitant le # 000 absolu pour les grandes zones (exception - mode AMOLED).

4) Texte et lisibilité

Texte principal : gris clair '# E6E8EB' sur '# 0E1116' (contraste ~ 12:1).
Texte secondaire : '# A6AEB8' ; Les indices sont encore plus foncés/transparents.
Longue lecture : nuances légèrement chaudes (réduire le « halo »).
Liens - accent + soulignement par défaut ; la couleur ≠ le seul porteur de sens.

5) Surfaces, profondeur et verre

Elevations: `base` → `elev1` → `elev2`; chaque couche est plus claire/plus chaude de 2 à 4 %.
Les ombres sont douces, larges, avec une faible opacité ; éviter les contours « lumineux ».
Les panneaux translucides (blur) sont modérément appropriés ; fournir le contraste du texte avec le substrat.
Les séparateurs sont des bordures semi-fines '--bd-soft' ou des « haires » à peine visibles.

6) États et focus

Hover : + 2-3 % de fond clair ; Active : − 2-3 % (plus foncé).
Focus : anneau clair (par exemple "outline : 2px solid # 6EA0FF ; outline-offset : 2px ; '), visible aussi sur les boutons d'accent.
Disabled : réduire le contraste avec soin ; ne pas descendre en dessous du niveau de lecture du texte.

7) Boutons, formulaires et tables

Primary : fond '--accent', texte '# 0E1116'.
Secondaire : fond '--bg-elev1', border '--bd-strong', texte '--fg-primary'.
Champs d'entrée : Arrière-plan '--bg-elev1', au focus, le border est accentué ; placeholder est plus faible, mais nous lisons.
Tableaux : zèbre-fond est à peine visible, l'attribution de la ligne à hover est + 2-3 % plus claire.

8) Illustrations, logos et photos

Logos et pictogrammes - versions inverses sur le noir ; évitez les ridules sur des fonds saturés.
Photo : ajouter un masque foncé (40-60 %) pour les titres contrastés.
Icônes : épaisseur unique, contour + remplissage - par état, couleurs non « toxiques ».

9) Date-visualisation dans un thème sombre

Couleurs des rangs - saturation modérée ; au moins 5 tonalités distinctes.
Les grilles et les axes sont éteints (alpha 20-30%) et les signatures sont --fg-muted.
Annotations/incidents - brillants mais lisibles ; soulignez avec la forme/le marqueur, pas seulement avec la couleur.
Les données vides sont des « brouillards » doux, pas des champs blancs.

10) Performance et batterie

Sur OLED, vous économisez vraiment du noir pur (# 000) - utilisez le mode AMOLED en utilisant l'option utilisateur.
Évitez les grandes bougies/blur solides sur les GPU faibles.
Respecter 'prefers-reduced-motion' : simplifier les animations/transitions.

11) Comportement et commutation

Par défaut, suivez 'prefers-color-scheme'.
Donnez à l'utilisateur un interrupteur explicite (Light/Dark/System), stockez la sélection (cookie/localStorage).
Lorsque vous changez de thème - pas de flashs : pré-ajout d'une classe de thème avant le rendu.

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) Accessibilité (A11y)

Contraste du texte ≥ 4. 5:1 (ordinaire), ≥ 3:1 (majeur).
N'encodez pas l'état uniquement en couleur : utilisez l'icône/modèle/signature.
Les styles de focus et la navigation au clavier sont obligatoires.
VoiceOver/TalkBack : rôles, labels, priorité tabou.

13) Anti-modèles

Texte blanc sur fond noir sur de grandes surfaces - « scintillement » et fatigue.
Les accents néon sur le noir sont « bruit lumineux ».
Ombres à contraste élevé (« gris sur noir » avec bordure rigide).
Texte transparent sur la photo sans masque.
Placeholder en voie de disparition (alpha trop bas).

14) Exemples de composants

Bouton

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

Carte

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) Plan d'essai

Éclairage : chambre sombre/lumière du jour/soirée de rue.
Devis : OLED et IPS, mobile/desktop, densités différentes.
A11y : contraste-checker, passage clavier, lisibilité placeholder 'ov.
Perception : test ab « fatigue oculaire » et erreurs d'entrée la nuit.
Performance : Métriques RUM (INP/CLS) après inclusion d'un thème sombre ; charge GPU (effets blur/ombre).

16) Métriques de qualité

Contrast Violences/1k éléments (objectif : → 0).
Taux complet sur « trop foncé/brillant ».
Night Session Completion (métriques comportementales par session de 22 : 00-06 : 00).
INP/CLS p75 dans Dark Mode vs Light (pas pire que la base).
Opt-in Dark Mode et la rétention des utilisateurs qui ont choisi le sujet.

17) Chèque de démarrage

• Palette de thème sombre avec 4 à 5 niveaux de surfaces
• Le contraste texte/icônes/frontières correspond au WCAG AA
• Styles et états de focus visibles (hover/active/disabled)
• Logos/icônes/photos adaptées, masques ajoutés sur la photo
• Graphiques - grilles éteintes, signatures lisibles, pas de rangées « toxiques »
• Commutateur Light/Dark/System, garder la sélection sans « flash »
• Respect de 'prefers-color-scheme' et 'prefers-reduced-motion'
• RUM/perf-dashboard, alertes sur les régressions

18) Plan de mise en oeuvre (3 itérations)

Itération 1 - Fondation (1-2 semaines)

Palette/tokens, surfaces de base (base/elev1/elev2), texte/bordures, boutons/champs/tables, commutateur de thème.

Itération 2 - Détails (3-4 semaines)

Graphiques et illustrations dans le noir, masques sur la photo, focus/états, animations avec un mouvement réduit, audit perf.

Itération 3 - Optimisation (en continu)

Mode AMOLED en option, réglage fin des contrastes, tests d'utilisabilité la nuit, comparaison RUM Light vs Dark, audits de marque/UX réguliers.

19) Mini-FAQ

Faire un fond noir pur ?
Pour l'IU - mieux est le gris foncé profond ; net # 000 laisser avec l'option « mode AMOLED ».

Faut-il augmenter la saturation des accents ?
Dans le noir - en général, l'inverse est légèrement éclairé et réduit la saturation pour ne pas « briller ».

Qu'en est-il des images de bannières ?
Ajoutez un substrat/masque foncé, vérifiez le contraste du texte et du logo.

Résultat

Le thème sombre n'est pas une inversion des couleurs, mais un mode de conception distinct : palette réfléchie, niveaux de surface, lisibilité, états corrects, graphiques et médias adaptés, et respect des paramètres système. Reposez-vous sur les jetons, contrôlez le contraste et la performance - et Dark Mode sera un outil pratique, stable et beau pour les utilisateurs de nuit et de jour.