Modifier image SVG en mode DARK

Bon,jour gcyrillus,

Merci de ton suivi.

Ce codepen te suffit-il ?

L'objectif est juste de changer la couleur du tracé, peu importe le fond.

boteha_2 a écrit :


background: linear-gradient(var(--ft), var(--ft))
Cela s'applique à l'image en background ?
Là je ne comprends pas grand chose, mais je fais l'essai.

Oui, c'est une couleur (celle du texte selon mode dark ou light) qui permet le melange avec l'cone aussi en bg derriere.

cdt

gcyrillus,

Merci pour les précisions.

J'ai essayé invert sur les images, le résultat n'est pas mauvais.

Cela s'applique à tous types d'images, alors j'ai ciblé :

img[src$=".svg"] {filter: invert(100%)}

Pour les background je ferai les essais dans la semaine... à suivre.
Modifié par boteha_2 (21 Jan 2024 - 20:49)

gcyrillus,

Pour les background je n'ai pas réussi à exporter ton code, ni dans la feuille réelle ni même dans mon codepen.

Et je ne comprends pas ce qui se passe dans ton codepen quand je passe en dark.

Ne vois-tu pas un autre moyen de créer pour les images en background un équivalent à {filter: invert(100%) qui lui fonctionne très bien pour les images ?
Modifié par boteha_2 (26 Jan 2024 - 13:13)

Bonjour,

Mets ton image en background d'un pseudo-element qui fait la même taille que l'élément qui devait avoir cette image en background, positionne ce pseudo-element en dessous de ton élément, et enfin applique le filter: invert(100%) au pseudo-element.

Supposons que tu aies un élément dont la classe est monElement, et que tu veuilles lui mettre une image appelée monImage.svg en background. Alors tu peux utiliser le code suivant :

.monElement {position: relative;}
.monElement:before {
  content: url("monImage.svg");
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  filter: invert(100%);
  z-index:-1;
}

Amicalement,
Modifié par parsimonhi (27 Jan 2024 - 02:27)

Bonjour,

le blend-mode et filter ne sont pas vraiment adapter pour faire ce genre de chose. Avec du noir et blanc, ça peut à peu prés le faire mais ne te convient apparemment pas.
XX-blend-mode , fait un mélange de couleurs et le résultat dépends de plusieurs paramètres, Si les paramètres des couleurs diffèrent d'un SVG à l'autre, le résultat sera différent pour chacun d'eux. Dans mon exemple, avec le gradient pour le mélange, l'un reçoit du blanc et l'autre du noir.

Alors autant faire dans l'idéal qui reste de se servir d'une image différente selon "prefers-color-scheme" et servir le fichier qui va bien C'est solide , il n'y aura pas de surprises
Coté HTML, il y a la balise <picture>

<picture>
  <source    srcset="dark.svg"    media="(prefers-color-scheme: dark)" " type="image/svg+xml">
  <img src="light.svg" alt="jesuisuneimagequipour">
</picture>

Coté CSS en background, tu as compris comment utilisé @media() et servir des styles différents.
Si tu as deux séries d’icônes (light et dark) tu pourrais par exemple depuis la feuille principale positionner les deux images et en cacher une en switchant les valeurs de background-size;
juste une proposition

a.linkIco {
background:
    url(https://www.xxxx.com/ico/light/ico.svg) top 50% left 0 no-repeat,
    url(https://www.xxxx.com/ico/dark/ico.svg) top 50% left 0 no-repeat;
    background-size: 30px 30px , 0 0;
}

Puis faire le switch d'un coup.

@media (prefers-color-scheme: dark) {
  a.linkIco {
      background-size: 0 0 , 30px 30px;
  }
}

Je pense que tu gagneras, du temps a mettre à jour les styles des fichiers svg pour en faire un second set, et aussi en sérénité

Cdt

Bonjour gcyrillus,

Merci de ton suivi.

gcyrillus a écrit :
Je pense que tu gagneras, du temps a mettre à jour les styles des fichiers svg pour en faire un second set, et aussi en sérénité.

Je pense que tu as raison.