Plugin Dark/Light mode qui ne fonctionne pas

par Dellou Mar 25 Juil 2023 - 23:50

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
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
Problème apparu depuis : Aujourd'hui
Lien du forum : https://wheel-and-deal.forumactif.com/

Description du problème

Bonjour Forumactif !
Je reviens vers vous car je cherche absolument à mettre en place un dark/light mode à mon forum, en parcourant, j'ai trouvé ce tuto :
https://blankthemerpg.forumactif.com/t77-edison
Et j'ai essayé mais..... comment dire que j'ai beau appuyer sur le bouton (qu'on retrouve sur le forum en dessous de la PA) baaaaaah....... ça ne fonctionne pas, je clique en vain... y aurait-il un problème dans mes scripts qui annulerait ce script ??? Je ne sais pas trop..... J'aimerais bien qu'on m'éclaire car je ne sais vraiment pas comment procéder... ou si vous avez un tuto similaire aussi n'hésitez pas!
Merci beaucoup Visage pleurant

par **Toryudo** Mer 26 Juil 2023 - 11:15

Bonjour !

Quand je regarde la page, pour le moment, je ne vois pas la modification dans la partie "overall_footer_end".
Le tuto https://blankthemerpg.forumactif.com/t77-edison parle bien de mettre un script en bas de page juste avant </body>, mais je ne le vois pas chez vous !

(accessoirement, je remarque que vous avez une balise <style> en tout début de overall_header : normalement, une balise <style> doit se trouver à l'intérieur du <head> ou du <body>, je vous propose de la replacer, elle et son contenu, juste avant </head> pour être plus propre. Dit autrement, une page doit toujours commencer par le DOCTYPE, puis l'ouverture de <html> ; il ne doit rien y avoir avant)

par Dellou Mer 26 Juil 2023 - 14:26

Bonjour !!

Pourtant, elle est bien là !
https://cdn.discordapp.com/attachments/410410920657944596/1133736465872982016/image.png

(Ohh merci beaucoup pour cette info je ne le savais pas !! C'est rectifié !)

par Dellou Mer 26 Juil 2023 - 14:32

... Oh je crois que je suis trop bête haha je n'ai pas capté que c'était avant les balises fermés ça doit être ça le problème, je rectifie ça pour voir!

par Dellou Mer 26 Juil 2023 - 14:40

Alors oui, y avait bien ça comme problème !

Le bouton fonctionne à présent mais comment faire pour que ça s'active ? J'ai le bouton mais comment faire pour switch la couleur du fond du forum par exemple ? J'ai seulement c/c les scripts/html/css de ce tuto sans y toucher ! J'ai lu sur le root mais j'avoue que du coup, tout mon css je l'ai fait avant de connaître la variable... est-ce un problème ?

Je l'ai mis ici
https://cdn.discordapp.com/attachments/410410920657944596/1133744059656196157/image.png

(Aussi pour le style avant le DOCTYPE est-ce vraiment dérangeant si c'est avant ? Car quand je le fais, ça casse plein de détails du forum, c'est une style juste pour le switch de compte Visage pleurant

vu que ça prend trop de place dans la fiche css et pour éviter la limite de css je l'ai mise là )

par MlleAlys Mer 26 Juil 2023 - 17:28

Bonjour,
Votre code installé fonctionne avec des variables css.
Vous avez ce code css fourni dans le tuto :

Code:: /* VARIABLE DU MODE PAR DEFAUT */ :root { --neutral: #FFF --accentClr: blue; } /* VARIABLE DU MODE INVERSE (ici mode sombre) */ [data-color-scheme="dark"] { --neutral: #000; --accentClr: red; } @media (prefers-color-scheme: dark) { [data-color-scheme=dark] { --neutral: #000; --accentClr: red; } }

"--neutral" est une variable qui correspond ici à une couleur :
En mode clair, il est indiqué : --neutral: #FFF, donc du blanc.
En mode sombre, il est indiqué : --neutral: #000; donc du noir.

Vous pouvez ensuite utiliser cette variable dans le css de votre forum, à la place d'une couleur.
Par exemple, en ajoutant ce code dans le css de votre forum :

Code:: html, body { background: var(--neutral); }

Le fond de page aura la couleur "--neutral", donc comme indiqué plus haut, du blanc en mode clair, et du noir en mode sombre.

Ici, le tuto vous a défini deux variables : --neutral et --accentClr. Vous pouvez les renommer, et/ou changer les couleurs correspondantes dans les thèmes clairs ou sombres, et/ou en créer de nouvelles.

par Dellou Mer 26 Juil 2023 - 17:45

Olala ! Merci ça fonctionne j'ai enfin compris haha ! Merci à vous deux pour votre aide/intérêt ! Visage pleurant

J'ai une toute petite question avant de mettre le sujet en résolu, j'aimerais savoir si avec ça, il est possible de changer les images de catégories ? Par exemple, en mode jour elles sont comme elles sont et en nuit, serait-il possible qu'elles change ? Ce sont des images background image ? (et est-il possible de le faire même si ce ne sont pas des background image...? (techniquement je pense que non..?))

Merci encore en tout cas!!

par MlleAlys Mer 26 Juil 2023 - 19:33

Pour une image de fond, vous pouvez déclarer votre variable ainsi, avec le "url()" :
--image1 : url(LIENIMAGE) ;

puis l'utiliser dans le css de l'élément comme ça :
background-image : var(--image1) ;

par Dellou Mer 26 Juil 2023 - 19:38

Merci merci beaucoup !!! C'est noté ! FFF - Plugin Dark/Light mode qui ne fonctionne pas 1f62d

Passez une très belle journée et merci encore pour votre aide !!

Plugin Dark/Light mode qui ne fonctionne pas