Léa Verou défend l’idée que la plupart des sites web n’ont pas besoin d’un bouton de basculement entre les modes clair et sombre. Selon elle, cette fonctionnalité ajoute une complexité inutile pour les utilisateurs, car le mode système (déterminé par l’OS) suffit généralement. Elle explique que les rares cas où un utilisateur souhaite forcer un mode spécifique sont marginaux et que la solution par défaut est souvent plus adaptée.
Elle revient également sur son précédent article recommandant un bouton à deux états (système vs. mode opposé) plutôt qu’à trois états, tout en précisant que cette solution ne répond pas à la question de l’utilité même du bouton. Son analyse s’appuie sur des principes d’expérience utilisateur (UX) et de charge cognitive, soulignant que la simplicité d’implémentation ne rime pas toujours avec facilité d’utilisation.
Enfin, elle mentionne les réactions suscitées par son premier article, partagé massivement, et les objections de Bramus, qui maintient que le contrôle manuel reste pertinent dans certains scénarios. Verou reconnaît que ses arguments n’ont pas convaincu son interlocuteur, mais réaffirme sa position en faveur d’une approche minimaliste.
L'autrice partage son expérience avec la cataracte, diagnostiquée à 30 ans. Cette condition a modifié son utilisation du web, notamment en développant une photophobie, la poussant à privilégier les thèmes sombres. Elle souligne l'importance de proposer les deux thèmes pour répondre aux besoins variés des utilisateurs, comme son ami sourdaveugle qui préfère un thème inversé. Elle utilise aussi l'extension Dark Reader, bien que parfaite. Son témoignage illustre l'importance de l'accessibilité pour tous.
Tout est dans le titre
Tout est dans le titre
Une explication sur le fonctionnement des modes light / dark (et pourquoi la fonction css light-dark est à utiliser)
Tout est dans le titre
Tout est dans le titre
Le code css pour avoir un dark mode minimaliste
@media (prefers-color-scheme: dark) {
html body {filter: invert(1);}
/* the following really should be managed by a cascade layer */
html img,
html img.book.cover,
html img.book.cover.big,
html [#archipelago](https://raphael.salique.fr/liens/./add-tag/archipelago) a:hover img {filter: invert(1);}
html [#thoughts](https://raphael.salique.fr/liens/./add-tag/thoughts) figure.standalone img {
box-shadow: 0.25em 0.25em 0.67em [#FFF8](https://raphael.salique.fr/liens/./add-tag/FFF8);
}
}
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre