Modifier image SVG en mode DARK

Bonjour,

aurais tu un exemple en ligne avec un seul SVG en test , avec un dans une image et l'autre dans un background ?

Il y a peut-être un truc à faire avec filter et background-blend-mode. Si tu avais un exemple tout prés, cela permettrais de tester rapidement quelques possibilité avec tes SVG et conditions

cdt

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.

gcyrillus a écrit :
Voici l'idée avec filter et background-blend-mode. https://codepen.io/gc-nomade/pen/BabZJvO Vois si tu en faire quelque chose Smiley decu

Cela semble prometteur, merci.

Je fais des essais dans le code réel, je reviens vers toi dès que c'est fait.

filter : je comprends.
Je suppose que cela s'applique aux images SVG, pas JPEG ?

background-blend-mode : je suis à peu près

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.
Modifié par boteha_2 (21 Jan 2024 - 19:22)

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 parsimonhi,

Merci de ton suivi.

Malin, un peu compliqué si je peux me permettre.

En fait je n'ai pas dit qu'il existe la possibilité de créer pour DARK une image à la base inversée.
Il suffit alors d'appeler en background l'image LIGHT en light et l'image DARK en dark.

Il doit s'agir d'une vingtaine de pictos, donc c'est faisable.
Par contre j'ai beaucoup d'images en img et donc invert(100%) évite d'avoir à dupliquer-transformer des dizaines d'images.

Je cherche malgré tout un solution CSS pour les background en SVG, j'espère percer les mystères du code de gcyrillus ou trouver autre chose.

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.