Thème sombre
L’option d’utiliser un thème sombre offre un certain confort visuel dans des conditions de faible luminosité. L’application de ces normes procure une expérience visuelle équivalente au thème clair et assure une lisibilité adéquate.
Exemple
Concepts clés
Voici les principaux concepts à considérer lors de l'implémentation d'un thème sombre dans les interfaces d’un projet :
- Donner le choix aux utilisateurs : Les interfaces doivent adopter par défaut la préférence du système pour le thème, tout en offrant un contrôle à l’utilisateur pour activer ou désactiver cette fonction selon ses préférences personnelles.
- Adaptation harmonieuse au thème clair : Le thème sombre est soigneusement ajusté pour maintenir un contraste équivalent au thème clair, assurant une cohérence visuelle et une lisibilité optimale des composants tels que les arrière-plans, le texte, les icônes et les images.
- Utilisation de nuances de gris bleus et de couleurs sobres : Le thème sombre privilégie des nuances de gris bleutées, limitant le noir et le blanc purs. Les grandes surfaces doivent être sombres pour réduire la fatigue visuelle, avec des accents de couleurs moins saturées.
- Populaire, mais non essentiel : Le thème sombre gagne en popularité avec des promesses parfois surfaites (réduction de la fatigue oculaire, économies de batterie, etc.) ; ces avantages peuvent être plus limités dans la réalité
. Ainsi, le thème sombre est considéré comme non essentiel. - N’est pas une solution pour l’accessibilité Web : Le thème sombre ne remplace pas un thème à haut contraste conçu pour l’accessibilité Web. Une approche prenant en compte divers besoins visuels est essentielle ; le thème sombre n’étant pas une solution unique.
Quand l’utiliser
Le thème sombre est approprié lorsque l’utilisateur utilise l’interface dans des environnements à faible luminosité, tels que la lecture nocturne, contribuant à atténuer légèrement la fatigue oculaire. Il est recommandé de restreindre son utilisation à ces contextes spécifiques, car il ne présente pas des avantages dans toutes les conditions d’utilisation.
Comment l’utiliser
Le thème sombre est activé par des jetons de couleur. Un seul jeton peut servir pour plusieurs éléments. Chaque jeton se voit attribuer 2 valeurs distinctes : une pour la palette du thème clair et une pour la palette du thème sombre.
Ne pas mélanger les thèmes
Le thème sombre s’applique à toute l’interface utilisateur. Mélanger les thèmes sombre et clair simultanément peut altérer la cohérence visuelle et l’expérience utilisateur. Cela peut affecter la lisibilité, le guidage de l’attention et la perception esthétique. Offrir l’option de personnalisation aux utilisateurs répond mieux aux préférences individuelles.
Option dans les paramètres
Il est recommandé d’inclure le thème sombre parmi les préférences du site Web ou de l’application. La méthode la plus courante est de le présenter sous forme de commutateur dans les paramètres utilisateur, accessible par une icône utilitaire dans le menu de navigation principal ou à l’intérieur d’une page de paramètres dédiée.
Correspondances des couleurs
Le thème sombre utilise les mêmes bases et composants que le thème clair du Système de design gouvernemental, la seule différence réside dans les couleurs.
Explications
Arrière-plans
Voici la palette par défaut des arrière-plans utilisée dans le thème clair du système de design et sa palette correspondante dans le thème sombre. En mode sombre, l’interface utilisateur emploie principalement des nuances de gris bleus foncés.
Ombrages et élévations
Une interface peut afficher des zones avec une élévation plus importante. Dans le thème clair, on utilise des ombrages pour illustrer la profondeur. Dans le thème sombre, on éclaircit l’arrière-plan pour créer la profondeur, nécessitant que chaque élément au-dessus ait un arrière-plan de ton de gris plus clair que celui en dessous.
Éléments colorés
Certains éléments se démarquent par leur couleur distinctive, tels que les boutons, les onglets, les notifications, les commutateurs, les curseurs, les boutons radio, les cases à cocher, les liens, etc. ; ce sont les éléments en évidence.
D’autres nécessitent moins d’attention, comme les accordéons, les notes, les alertes générales, les avis, les boutons de sélection, les étiquettes, le fil d’Ariane, etc. ; ce sont les éléments en subtilité.
Éléments en évidence
Ces éléments adoptent une teinte située au centre de l’échelle de couleurs en thème clair, par exemple « Bleu #1472BF » ou « Bleu PIV #095797 ». En thème sombre, une teinte moins saturée est privilégiée pour une meilleure distinction sur les surfaces sombres, comme « Bleu 400 #3B95E ».
Éléments en subtilité
Moins accentués, ils utilisent des valeurs inférieures de l’échelle de couleurs en thème clair, proches des couleurs d’arrière-plans, telles que « Bleu pâle #DAE6F0 ». En thème sombre, cette approche s’inverse, avec des valeurs plus élevées harmonisées avec les couleurs d’arrière-plans sombres, par exemple « Bleu 800 #162B47 ».
Couleur d’arrière-plan
| Thème clair | Thème sombre |
|---|---|
Blanc | Gris 900 |
Couleur du texte
| Thème clair | Thème sombre |
|---|---|
Bleu foncé | Gris 150 |
Couleur principale
| Thème clair | Thème sombre |
|---|---|
Bleu pâle | Bleu 800 |
Bleu clair | Bleu 500 |
Bleu | Bleu 400 |
Bleu PIV | Bleu 300 |
Bleu moyen | Bleu 200 |
Bleu foncé | Bleu 150 |
Couleur d’accent
| Thème clair | Thème sombre |
|---|---|
Rose | Rouge 350 |
Niveaux de gris
| Thème clair | Thème sombre |
|---|---|
Gris pâle | Gris 850 |
Gris clair | Gris 700 |
Gris | Gris 500 |
Gris moyen | Gris 400 |
Gris foncé | Gris 300 |
Rouges
| Thème clair | Thème sombre |
|---|---|
Rose pâle | Rouge 800 |
Rose | Rouge 550 |
Rouge | Rouge 400 |
Rouge foncé | Rouge 200 |
Verts
| Thème clair | Thème sombre |
|---|---|
Vert pâle | Vert 800 |
Vert | Vert 400 |
Vert foncé | Vert 200 |
Jaunes
| Thème clair | Thème sombre |
|---|---|
Jaune pâle | Jaune 800 |
Jaune | Jaune 650 |
Jaune foncé | Jaune 450 |
Violet
| Thème clair | Thème sombre |
|---|---|
Violet | Violet 300 |
Ombrages
| Thème clair | Thème sombre |
|---|---|
Élévation 0 | Élévation 0 |
Élévation 1 | Élévation 1 |
Élévation 2 | Élévation 2 |
Élévation 3 | Élévation 3 |
Élévation 4 | Élévation 4 |
À consulter aussi
Dernière mise à jour : 15 mars 2024