Le sombre n'est pas « noir + texte blanc »

Une interface sombre premium repose sur des gris profonds hiérarchisés (#0A0A0A, #141414, #1C1C1C), jamais sur du noir absolu pour les surfaces. Le blanc pur pique les yeux en corps de texte : on préfère #E0E0E0 pour le contenu et le blanc réservé aux titres.

Les 5 règles d'une UI sombre réussie

  1. Une couleur d'accent unique (orange électrique, vert néon) portant tous les appels à l'action — le reste reste neutre.
  2. Contrastes AAA sur le texte : au moins 7:1 pour le corps, 4.5:1 minimum pour les textes secondaires.
  3. Profondeur par la lumière : les éléments flottants gagnent une lueur subtile (glow) plutôt qu'une ombre grise.
  4. Frontières lumineuses : des bordures rgba(255,255,255,0.08 à 0.15) structurent les cartes sans surcharger.
  5. Micro-interactions discrètes : transitions de 150 à 300 ms, retour tactile léger, jamais d'animation qui retarde la lecture.
« Un mode sombre réussi se remarque à peine : l'œil glisse, le contenu rayonne, la marque reste en fond. »

Et le mode clair ?

Proposer les deux thèmes via des tokens CSS (variables) coûte peu et couvre toutes les préférences : le sombre pour l'identité, le clair pour la lisibilité en plein soleil — un enjeu réel sous nos latitudes. Le passage doit être instantané, sans flash blanc au chargement (meta color-scheme + script bloquant en tête de page).