Couleur de texte dégradé avec réglage "écran sombre"

Fermé
alex - 22 avril 2022 à 03:13
 alex - 22 avril 2022 à 17:40
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
A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
22 avril 2022 à 13:18
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
0
Merci beaucoup.

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 !
0