La navigation en mode sombre rend des sites illisibles
La navigation en mode sombre rend des sites illisibles
Ce webmestre voudrait que le style de son site ne soit pas modifiable, pas impacté par les options de navigation choisies par les internautes.
Je lui ai répondu que ce n'était pas possible, qu'on ne pouvait pas empêcher l'internaute de jouer avec les options du navigateur (ou de l'OS) et que la seule chose à faire était d'afficher un message d'avertissement comme quoi la navigation en mode sombre ne permettait pas une expérience utilisateur optimale.
Mais il insiste.
Qui a raison ? Existe-t-il une possibilité de figer le style du site ? Faut-il des adaptations de css conditionnelles en cas de navigation en mode sombre ?
Bonjour les amis, et notamment, Vincent, toi qui es un adepte du mode sombre, voici mon souci. Le webmestre d'un site TNG demande des conseils pour que le style de son site soit toujours celui qu'il a créé. Des visiteurs de son site ont choisi la navigation en mode sombre dans leur navigateur (parait que c'est possible aussi pour tout l'OS de son ordi) et cela rend certaines parties du site illisibles, notamment les menus.
Ce webmestre voudrait que le style de son site ne soit pas modifiable, pas impacté par les options de navigation choisies par les internautes.
Je lui ai répondu que ce n'était pas possible, qu'on ne pouvait pas empêcher l'internaute de jouer avec les options du navigateur (ou de l'OS) et que la seule chose à faire était d'afficher un message d'avertissement comme quoi la navigation en mode sombre ne permettait pas une expérience utilisateur optimale.
Mais il insiste.
Qui a raison ? Existe-t-il une possibilité de figer le style du site ? Faut-il des adaptations de css conditionnelles en cas de navigation en mode sombre ?
Il est possible de forcer un site web à utiliser le mode clair (ou tout autre style spécifique), indépendamment des préférences de mode sombre ou clair du système d'exploitation ou des paramètres du navigateur.
1 - Il faudrait utiliser une feuille de style CSS fixe : Au lieu de baser le thème du site (clair ou sombre) sur les préférences de l'utilisateur détectées via CSS ou JavaScript, tu peux simplement décider de ne pas tenir compte de ces préférences et d'appliquer un jeu de couleurs fixe. Par exemple, tu pourrait toujours utiliser un thème clair pour ton site, quelles que soient les préférences de l'utilisateur.
body {
background-color: white;
color: black;
}2 - En ignorant les préférences de l'utilisateur (via CSS) : Normalement, on détecte le mode préféré de l'utilisateur avec la requête de média (prefers-color-scheme). Pour ignorer ce paramètre et forcer un thème spécifique, il suffit de ne pas utiliser cette requête de média ou de s'assurer que les règles CSS pour le mode clair ont la priorité.
:root {
--background-color: white;
--text-color: black;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}3 - En utilisant du code JavaScript pour forcer le thème : Si ton site utilise JavaScript pour changer dynamiquement de thème en fonction des préférences de l'utilisateur, tu peux modifier ce script pour qu'il applique toujours le thème clair, quelles que soient les préférences détectées.
document.body.classList.add('light-mode');Dans cet exemple, tu as une classe CSS ".light-mode" qui définit le style de ton thème clair en forçant ce thème à ajouter la classe au corps du document, indépendamment de toute logique de détection du mode sombre ou clair.
Il faut cependant tenir compte que les visiteurs du site n'apprécieront pas forcément le fait de forcer un thème, surtout pour ceux qui, comme moi, préfèrent les thèmes sombres (à cause de souci de vue quelconque ou de handicap).
Hello,
Il est possible de forcer un site web à utiliser le mode clair (ou tout autre style spécifique), indépendamment des préférences de mode sombre ou clair du système d'exploitation ou des paramètres du navigateur.
1 - Il faudrait utiliser une feuille de style CSS fixe : Au lieu de baser le thème du site (clair ou sombre) sur les préférences de l'utilisateur détectées via CSS ou JavaScript, tu peux simplement décider de ne pas tenir compte de ces préférences et d'appliquer un jeu de couleurs fixe. Par exemple, tu pourrait toujours utiliser un thème clair pour ton site, quelles que soient les préférences de l'utilisateur.
body {
background-color: white;
color: black;
}2 - En ignorant les préférences de l'utilisateur (via CSS) : Normalement, on détecte le mode préféré de l'utilisateur avec la requête de média (prefers-color-scheme). Pour ignorer ce paramètre et forcer un thème spécifique, il suffit de ne pas utiliser cette requête de média ou de s'assurer que les règles CSS pour le mode clair ont la priorité.
:root {
--background-color: white;
--text-color: black;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}3 - En utilisant du code JavaScript pour forcer le thème : Si ton site utilise JavaScript pour changer dynamiquement de thème en fonction des préférences de l'utilisateur, tu peux modifier ce script pour qu'il applique toujours le thème clair, quelles que soient les préférences détectées.
document.body.classList.add('light-mode');Dans cet exemple, tu as une classe CSS ".light-mode" qui définit le style de ton thème clair en forçant ce thème à ajouter la classe au corps du document, indépendamment de toute logique de détection du mode sombre ou clair.
Il faut cependant tenir compte que les visiteurs du site n'apprécieront pas forcément le fait de forcer un thème, surtout pour ceux qui, comme moi, préfèrent les thèmes sombres (à cause de souci de vue quelconque ou de handicap).
1 visiteur(s)
1 visiteur(s)