Couleur de texte dégradé avec réglage "écran sombre"
alex
-
alex -
alex -
Bonjour,
J'ai créé mon site internet il y a plusieurs années (mais l'informatique n'est pas mon activité pro, donc je ne suis pas un énorme spécialiste même si je me documente sur tout ce que je peux).
Ma question relève de la gestion des couleurs.
En effet, j'ai constaté sur mes tablettes et téléphones samsung (ça doit être partout pareil) que si on indique dans les paramètres ECRAN SOMBRE au lieu de ECRAN CLAIR, la navigation rend les couleurs différentes. Il y a quasiment une inversion vidéo.
Je veux bien que des utilisateurs préfèrent le côté sombre (c'est mon cas parfois), mais mon site est assez "dégueulasse" dans ce cas là.
Exemples :
- écriture rouge sombre (écran clair) qui devient rose bonbon, presque flashy Barbie (écran sombre)
- fond beige sable (écran clair) qui devient marron (écran sombre)
Le beige clair qui devient marron, ça ne me dérange pas. En revanche, mes rouges sombres qui deviennent rose, là, c'est un gros problème (de crédibilité déjà).
Y-a-t-il une commande CSS qui permettrait de "bloquer" le rouge sombre quel que soit le mode d'affichage ? Ou bien y-a-t-il une commande qui permettrait de donner expressément la couleur alternative en cas de mode écran sombre (afin d'éviter le rose qui tue) ?
Si vous avez des pistes de réflexion, je suis preneur.
Merci.
Alex
J'ai créé mon site internet il y a plusieurs années (mais l'informatique n'est pas mon activité pro, donc je ne suis pas un énorme spécialiste même si je me documente sur tout ce que je peux).
Ma question relève de la gestion des couleurs.
En effet, j'ai constaté sur mes tablettes et téléphones samsung (ça doit être partout pareil) que si on indique dans les paramètres ECRAN SOMBRE au lieu de ECRAN CLAIR, la navigation rend les couleurs différentes. Il y a quasiment une inversion vidéo.
Je veux bien que des utilisateurs préfèrent le côté sombre (c'est mon cas parfois), mais mon site est assez "dégueulasse" dans ce cas là.
Exemples :
- écriture rouge sombre (écran clair) qui devient rose bonbon, presque flashy Barbie (écran sombre)
- fond beige sable (écran clair) qui devient marron (écran sombre)
Le beige clair qui devient marron, ça ne me dérange pas. En revanche, mes rouges sombres qui deviennent rose, là, c'est un gros problème (de crédibilité déjà).
Y-a-t-il une commande CSS qui permettrait de "bloquer" le rouge sombre quel que soit le mode d'affichage ? Ou bien y-a-t-il une commande qui permettrait de donner expressément la couleur alternative en cas de mode écran sombre (afin d'éviter le rose qui tue) ?
Si vous avez des pistes de réflexion, je suis preneur.
Merci.
Alex
A voir également:
- Couleur de texte dégradé avec réglage "écran sombre"
- Excel cellule couleur si condition texte - Guide
- Double ecran - Guide
- Capture d'écran whatsapp - Accueil - Messagerie instantanée
- Retourner ecran pc - Guide
- Réglage luminosité écran - Guide
1 réponse
Bonjour,
Peut-être voir du coté de la propriété css prefers-color-scheme qui permet détecter si l'utilisateur défini le thème sombre ou clair dans les préférences du navigateur ou de l'OS.
Tu peux utiliser une media query avec cette propriété pour définir le style de tes éléments pour chaque thème (voir les exemples sur la doc) :
https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme
Peut-être voir du coté de la propriété css prefers-color-scheme qui permet détecter si l'utilisateur défini le thème sombre ou clair dans les préférences du navigateur ou de l'OS.
Tu peux utiliser une media query avec cette propriété pour définir le style de tes éléments pour chaque thème (voir les exemples sur la doc) :
https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme
Je ne savais pas que ce critère existait. J'ai déjà mis en place des media query pour faire du responsive design, mais je vais ajouter ce critère d'écran sombre ( @media (prefers-color-scheme: dark) { ....... dans mes CSS) pour choisir moi-même les couleurs alternatives !