coastdigitalgroup/coastai-skills

Système de Conception de Thème Sombre

Objectif

Le skill Système de Conception de Thème Sombre fournit une méthodologie pour traduire des interfaces web en thème clair vers leurs équivalents en thème sombre. Concevoir un mode sombre n'est pas une simple question d'inversion des valeurs de couleur. Le faire rompt les métaphores d'éclairage physiques, provoque une fatigue visuelle sévère et crée des interfaces illisibles et très éblouissantes.

Ce système établit les règles visuelles et spatiales de la conception en basse lumière :

• Inversion de l'Élévation : Rendre compte de la profondeur en mode sombre en éclaircissant les arrière-plans des surfaces élevées plutôt qu'en utilisant des ombres sombres.
• Désaturation des Couleurs : Adapter les couleurs d'accentuation vives de la marque et sémantiques à des niveaux de faible contraste pour éviter les « vibrations » visuelles et la fatigue oculaire.
• Prévention du Contraste et de l'Halation : Éviter les combinaisons de blanc pur sur noir pur qui provoquent un effet de halo extrême (halation) pour les lecteurs astigmates ou dyslexiques, en optant plutôt pour des blancs cassés et des noirs cassés.
• Calibrage du Poids Typographique : Contrer « l'irradiation » (l'illusion d'optique où un texte clair sur fond sombre semble plus épais et plus gras qu'un texte sombre sur fond clair).
• Atténuation des Médias : Adapter les images, les vidéos et les diagrammes vectoriels afin qu'ils n'« aveuglent » pas visuellement l'utilisateur dans des conditions de faible luminosité.

---

Cas d'Utilisation

• Conception de Kits UI Double-Thème : Établir l'architecture des tokens de conception sémantique pour un système prenant en charge nativement les modes clair et sombre.
• Refonte de Tableaux de Bord SaaS et d'Environnements de Lecture : Créer des interfaces à faible fatigue optimisées pour une visualisation de longue durée, les flux de travail des développeurs ou une utilisation en soirée.
• Audit de Thèmes Sombres Inaccessibles : Identifier et corriger les problèmes de contraste, les accents vibrants, les poids de texte illisibles et les ressources médiatiques éblouissantes.
• Fourniture de Spécifications de Transfert Multi-Thème : Générer des spécifications propres et prêtes pour le développement montrant exactement comment les éléments se comportent selon les thèmes.

---

Quand NE PAS Utiliser

• Environnements Sombre par Défaut (Cinématographiques) : Si une application est exclusivement sombre (par exemple, Spotify, Netflix ou les plateformes de streaming de jeux) et ne prendra jamais en charge un thème clair. Un système de conception double-thème est une surcharge inutile dans ce cas.
• Micro-campagnes Hautement Expressives / Artistiques : Pages d'atterrissage autonomes où la rupture visuelle, les palettes à saturation extrême ou l'image de marque artistique priment sur le confort de visualisation de longue durée ou les règles d'accessibilité strictes.
• Frameworks Legacy Strictement Statiques : Applications dont les architectures front-end ne peuvent pas charger de feuilles de style dynamiques ou ne prennent pas en charge les variables CSS, empêchant une adaptation systématique du thème.

---

Entrées

1. Palette de Base du Mode Clair et Styles de Marque : Les couleurs principales existantes de la marque, les couleurs secondaires, les échelles typographiques et les espacements fluides.
2. Inventaire des Composants et Hiérarchie de Profondeur : Une liste complète des mises en page et des couches UI (arrière-plans, barres latérales, cartes, modales, menus déroulants).
3. Contexte de l'Environnement Lumineux : L'environnement physique typique de l'utilisateur cible (par exemple, lecture au coucher le soir vs. salle de contrôle industrielle très éclairée).
4. Objectif d'Accessibilité : Norme WCAG 2.2 AA (minimum) ou AAA (améliorée), y compris les considérations pour l'astigmatisme et le daltonisme.

---

Sorties

1. Carte de Tokens Sémantiques Unifiée : Une spécification systématique reliant directement les valeurs du mode clair à leurs équivalents en mode sombre correspondants.
2. Échelle de Surface Basée sur l'Élévation : Une échelle de 5 à 6 niveaux définissant comment les valeurs d'arrière-plan de surface s'éclaircissent à mesure qu'elles flottent plus haut sur l'axe Z.
3. Palette d'Accents Désaturée : Un ensemble calibré de couleurs d'accentuation primaires, secondaires et sémantiques désaturées pour les arrière-plans sombres.
4. Corrections de Feuille de Style Typographique : Règles spécifiques pour les ajustements de poids de police, d'espacement des lettres et de couleur du texte pour contrer l'effet d'irradiation.
5. Spécifications d'Atténuation des Médias : Techniques CSS et HTML pour réduire le contraste/la luminosité des images et ajuster les graphiques vectoriels.

---

Flux de Travail

1. Définir les Fondations : Choisir le Noir Casse et le Blanc Casse

Éviter le #000000 (noir pur) absolu pour les arrière-plans et le #FFFFFF (blanc pur) absolu pour le texte du corps.

• L'Arrière-plan de Base : Établir un neutre sombre et teinté (par exemple, ardoise foncée, charbon, ou gris-bleu marine foncé entre #121212 et #1A1A1A). Cela réduit la fatigue oculaire, empêche le scintillement de l'écran et conserve une certaine profondeur visuelle.
• La Base du Texte : Choisir un blanc cassé ou un gris clair (par exemple, #E2E8F0 ou #EAEAEA avec une opacité de 85% à 90%). Cela garantit un contraste confortable sans provoquer d'halation (diffusion de la lumière dans l'œil du lecteur).

2. Traduire la Profondeur par l'Éclaircissement de l'Élévation

Dans un thème clair, on indique qu'un élément est élevé en projetant une ombre plus foncée. Dans un thème sombre, une ombre foncée est invisible sur un fond sombre.

• Le Principe d'Éclaircissement : À mesure qu'un élément s'élève plus haut sur l'axe Z, il se rapproche de la source lumineuse ambiante virtuelle et devient plus clair, pas plus foncé.
• Créer une Échelle de Surface d'Élévation :
  • Niveau 0 (Base du Canevas) : Couleur la plus foncée (par exemple, #121212).
  • Niveau 1 (Carte/Élément de Liste) : Légèrement plus clair (par exemple, #1D1D1D).
  • Niveau 2 (En-tête Fixe/Action Flottante) : Encore plus clair (par exemple, #242424).
  • Niveau 3 (Boîte Modale/Dialogue) : Surface la plus claire (par exemple, #2C2C2C).
• Soutenir avec des Ombres Douces : Utiliser des ombres très subtiles, gris foncé ou noires translucides sur les couches élevées (par exemple, rgba(0, 0, 0, 0.5)) pour fournir une séparation sur les surfaces plus grandes qui se trouvent au-dessus des éléments de niveau 1.

3. Calibrer et Désaturer les Couleurs d'Accentuation

Les couleurs très saturées qui semblent vives sur un canevas blanc vont « vibrer » sur un canevas sombre, créant une fatigue visuelle sévère et échouant aux tests de contraste.

• Désaturer les Accents de Marque : Déplacer les couleurs de la marque vers des équivalents plus clairs, plus doux et plus pastel. (Par exemple, un bleu primaire vif #0055FF sur fond clair doit correspondre à un bleu désaturé #66A3FF ou #80B3FF sur fond sombre).
• Maintenir des Accents Sûrs pour le Contraste : Vérifier que les couleurs d'accentuation désaturées sur les surfaces sombres respectent toujours les normes WCAG 2.2 AA (rapport minimum de 4,5:1 pour le texte, 3:1 pour les états interactifs).
• Éviter les Grands Blocs Saturés : Au lieu de rendre des boutons ou des bannières entiers dans des couleurs saturées solides, les utiliser avec parcimonie—comme les liens de texte, les bordures ou les indicateurs subtils.

4. Ajuster la Typographie pour l'Irradiation Optique

Le texte clair sur fond sombre souffre d'irradiation—le texte blanc semble « saigner » dans l'obscurité environnante, donnant l'impression que les lettres sont plus grasses, plus épaisses et plus proches les unes des autres que leurs équivalents sombre sur clair.

• Calibrage du Poids : Réduire le poids de police des titres en gras du thème clair d'un cran (par exemple, passer de 700 (Gras) à 600 (Demi-gras) ou même 500 (Moyen) sur fond sombre).
• Calibrage de l'Espacement des Lettres : Augmenter légèrement l'espacement des lettres (tracking) pour le texte du corps en mode sombre (par exemple, letter-spacing: 0.02em; ou 0.015em;) pour empêcher les lettres individuelles de se fondre les unes dans les autres.
• Hiérarchie Secondaire/Tertiaire : Contrôler la hiérarchie en ajustant l'opacité de la couleur du texte, pas seulement la taille. Utiliser opacity: 0.87 pour le corps de texte haute priorité, opacity: 0.60 pour le texte d'aide secondaire et opacity: 0.38 pour les indicateurs désactivés.

5. Adapter les Médias et le Contenu Riche

Les photos, graphiques et diagrammes non modifiés peuvent ruiner une expérience de mode sombre par ailleurs parfaite en aveuglant l'utilisateur avec des blancs vifs et très contrastés.

• Atténuation des Photos : Appliquer une réduction subtile de la luminosité et du contraste aux photographies pour les fondre dans l'atmosphère de faible luminosité.

  [data-theme="dark"] img:not(.avatar) {
    filter: brightness(0.85) contrast(0.95);
  }
  

• Actifs Vectoriels et Illustrations : Échanger les couleurs d'arrière-plan vives dans les SVG ou utiliser des filtres SVG pour inverser des tracés spécifiques. Pour les graphiques illustratifs, utiliser <picture> avec des requêtes média pour charger des actifs de thème sombre personnalisés.
• Visualisations de Données : Redéfinir les séries de couleurs des graphiques pour utiliser des lignes désaturées et des remplissages de zone semi-transparents qui restent lisibles sans luminance excessive.

---

Règles de Décision

La Règle de Luminosité d'Élévation

Chaque fois que vous établissez l'arrière-plan d'un conteneur visuel, consultez le niveau d'élévation. Ne rendez jamais une modale ou un menu déroulant élevé plus foncé que l'arrière-plan de la page en dessous.

Niveau d'Élévation	Arrière-plan Mode Clair	Arrière-plan Mode Sombre	Indice d'Élévation Implicite
Niveau 0 (Canevas)	#FFFFFF (Blanc) ou #F8F9FA	#121212 (Noir cassé)	Niveau du sol / base
Niveau 1 (Carte/Section)	#FFFFFF (Blanc) avec bordure	#1E1E1E (Surface 1)	Flottant 1-2dp
Niveau 2 (En-tête/Fixe)	#FFFFFF ou teinte translucide subtile	#252525 (Surface 2)	Flottant 4-8dp
Niveau 3 (Modale/Dialogue)	#FFFFFF avec ombre portée lourde	#2D2D2D (Surface 3)	Flottant 12-24dp

La Limite de Saturation

• Les accents utilisés comme arrière-plans pour les états interactifs (par exemple, un conteneur de chip secondaire) doivent avoir une saturation de 10% à 15% en mode sombre.
• Les accents utilisés comme texte de premier plan ou icônes doivent avoir une saturation de 40% à 60% pour garantir qu'ils se démarquent sans vibrer sur la surface sombre.

La Marge de Contraste

Parce que l'éblouissement de l'écran et les écrans de mauvaise qualité dégradent la visibilité en mode sombre plus sévèrement qu'en mode clair, visez toujours un rapport de contraste de 5,0:1 pour le texte du corps en mode sombre (dépassant le minimum WCAG de 4,5:1) pour agir comme une marge pour les environnements physiques médiocres.

---

Contraintes

• Accessibilité (WCAG AA) : Les éléments de texte doivent atteindre au moins 4,5:1 de contraste (3:1 pour les grands textes). Les bordures UI, les anneaux de focus et les icônes fonctionnelles doivent atteindre au moins 3:1 de contraste. Les indicateurs de focus doivent rester très visibles et ne pas être noyés par la luminosité de l'arrière-plan sombre (WCAG 2.2 SC 2.4.11).
• Adaptation à l'Éblouissement Réactif : Les couleurs du texte doivent être résilientes à un éblouissement ambiant élevé (comme les écrans mobiles utilisés à l'extérieur), ce qui signifie que les niveaux de contraste minimaux absolus doivent être évités.
• Pas de Hiérarchie Uniquement par la Couleur : Ne vous fiez pas uniquement à la teinte d'une couleur désaturée pour transmettre un état (par exemple, avertissement vs. erreur dans les graphiques). Intégrez des motifs distincts, des étiquettes de texte ou une iconographie.

---

Schémas d'Échec Courants

• « L'inverseur Littéral » : Exécuter un filtre d'inversion de couleur automatisé sur un thème clair. Cela transforme les éléments élevés en mode clair avec des ombres sombres en éléments enfoncés en mode sombre avec des anneaux blancs lumineux, brisant tous les modèles d'éclairage naturels.
• Le Cauchemar « Néon Vibrant » : Placer des couleurs de marque entièrement saturées (par exemple, #00FF00 ou #FF00FF) directement sur un fond noir pur. Cela déclenche une fatigue visuelle, rendant le texte presque impossible à lire pendant plus de quelques secondes.
• L'Extrême OLED (Lueur Noire Pure) : Utiliser du texte #FFFFFF directement sur des arrière-plans #000000. Cela crée un effet de halo/éblouissement sévère sur de nombreux écrans, réduisant la vitesse de lecture et provoquant une fatigue oculaire.
• L'Anneau de Focus Disparaissant : Concevoir un beau mode sombre mais laisser les indicateurs de focus par défaut du navigateur, qui sont souvent bleu foncé et deviennent complètement invisibles sur des fonds ardoise sombres.
• L'Illustration Aveuglante : Créer une UI sombre homogène, mais laisser des arrière-plans blanc pur très contrastés à l'intérieur des graphiques SVG, des logos ou des icônes illustratives.

---

Critères de Validation

• Valeurs de Base : Aucun noir pur absolu (#000) n'est utilisé pour l'arrière-plan principal du canevas, et aucun blanc pur absolu (#FFF) n'est utilisé pour le texte du corps.
• Modèle d'Élévation : Les surfaces deviennent progressivement plus claires (valeur de luminosité plus élevée) à mesure qu'elles s'élèvent sur l'axe Z.
• Vérification du Contraste : Chaque couleur de texte, y compris le texte d'aide atténué, atteint ou dépasse le rapport de contraste WCAG 2.2 AA (4,5:1 normal, 3:1 grand).
• Accents Non Vibrants : Les couleurs d'accentuation et de statut sont désaturées pour se situer entre 10% et 60% de saturation selon l'application, évitant les vibrations visuelles.
• Visibilité du Focus : Les éléments interactifs ont des indicateurs de focus très contrastés et distincts, clairement visibles sur les surfaces sombres.
• Calibrage Typographique : Le texte en gras est ajusté (réduit d'un cran de poids ou espacé) pour compenser l'irradiation.
• Filtre Média : Un mécanisme réactif (filtres CSS ou échange d'actifs sombres) est spécifié pour réduire la luminosité et le contraste des médias riches et des actifs vectoriels.