Changer les images de contact selon la version dark ou light

[noxeternam]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://amyforumtest2.forumactif.com/

Description du problème

Bonjour,

J'utilise la base du Blank Theme sur mon forum, avec notamment le plugin Edison, qui sert pour avoir une version light et une version dark avec un switch.

Seul problème qu'il me reste : j'ai utilisé des images en png pour les champs de contact du profil (visible dans un sujet, sous le profil de chaque posteur + sur le profil d'un utilisateur).
Mais mes images sont des icones en ligne noire (sur fond transparent). En version light, c'est parfait car c'est sur fond blanc... mais voilà, en passant en version dark, évidemment c'est icone noire sur fond noir, donc ça ne se voit pas et ça pose problème.

Y aurait-il un script que je peux mettre place pour changer les images de contact profil selon la version light ou dark ? Je me dis que ça doit être faisable en Javascript mais je n'ai aucune connaissance là-dedans...

Si pas de solution, je verrai pour faire des icones avec un fond ou colorées, mais je me suis dit que j'allais solliciter votre aide en premier lieu.

Merci beaucoup

[Toryudo]

Bonjour !

C'est faisable via CSS également.
Il y a une propriété CSS filter qui permet d'inverser les couleurs d'une image : elle s'appelle "filter: invert(100%)".

Petit exemple de prévisualisation ici : https://www.w3schools.com/cssref/playdemo.php?filename=playcss_filter&preval=invert(100%25)

Le noir va donc devenir blanc si vous mettez cette propriété sur le ou les bons éléments.
Si je prends l'exemple du profil https://amyforumtest2.forumactif.com/u1, ça reviendrait à écrire ceci :

Code:

[data-color-scheme="dark"] .profil_colonne_socialmedia img {
  filter: invert(100%);
}

[noxeternam]

Omgggg mais incroyable ! Je ne connaissais pas du tout cette propriété css, merci beaucoup pour la découverte !

Le sujet est donc résolu