Follow

Je viens de me prendre 2 claques en expérimentant le mode sombre en CSS.

1. Le principe des variables natives en CSS.

```css
:root {
--hue: 210;
--text-color-normal: hsl(var(--hue), 10%, 15%);
}
```

2. L'astuce qui consiste à inverser tout le contenu pour commencer.

```css
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(.5turn);
}
}
```

J'adore expérimenter à mes heures perdues, ça me détend. C'est normal docteur ?

@janusz Ça fait un bail que j’aimerai faire un version clair / sombre de mon site mais à chaque fois … La dose d’ajustements à faire de partout me fait peur.

Salut @lord

Essaie juste ça dans un premier temps. Dans mon cas, ça a fait des miracles.

@media (prefers-color-scheme: dark) {
:root {
--background: hsl(var(--hue), 11%, 15%);
--background-hover: hsl(var(--hue), 12%, 82%);
}

html {
filter: invert(1) hue-rotate(.5turn);
}

img {
filter: invert(1) hue-rotate(.5turn);
}

/*
img:not(:hover) {
opacity: .8;
transition: opacity .25s ease-in-out;
}
*/
}

@lord
Pardon, avec ça en plus

:root {
--hue: 210;
}

@janusz Ouai mais j’aimerai mieux faire une sélection de couleur cohérente ce qui n’est pas le cas en moulinant globalement comme ça.

Du coup ça y est je prend le temps de le faire là…

@lord

Je suis parti d'une mise en page pour mes fichiers en Markdown. Elle était assez fournie.
J'ai fait une recherche sur le mot clé #, puis regroupé les valeurs qui se ressemblaient par des variables.
En mode sombre, faire les ajustements de couleurs hsl m'a bien aidé. C'est là où j'ai été surpris par la rapidité des opérations.

En fait, j'avais envie, j'ai foncé et je ne suis pas posé de question. D'où ma surprise.

J'attends de voir ce que cela donnera avec mon site sous Hugo.

@janusz Bon bha voilà j’ai un premier jet pas trop pourri mais il reste quand même les SVG à adapter :-/ ça va être moins simple.

@lord @janusz Et ici j'ai juste la flemme (j'ai déjà tout d'indexé sur gruvbox).

@lord @janusz Y a des gens qui utilisent encore le web en mode clair? :P

@Comral C'est clairement le choix que j'ai fait pour mon site... (lol) @lord @janusz

@Faket @Comral @janusz Ouai je suis d’accord mais si quelqu’un a une déficience visuelle qui lui permet de bien mieux apprécier un site clair… c’est dommage de pas se pencher dessus.

Bon je dis ça mais j’ai pas encore eu le courage de le faire :-/

@lord @janusz @Comral Je prends note de l'argument, j'y penserai. Je pense que c'est assez simple de faire ce travail sur mon site qui n'a (presque) pas de couleurs.

Sign in to participate in the conversation
La Quadrature du Net - Mastodon - Media Fédéré

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!