dark mode / mode sombre

par mlle Mer 3 Nov 2021 - 20:36

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

j'essaie d'installer un dark mode sur mon forum, j'ai installé un javascript, mon css, et mon code dans mes templates, mais uniquement la couleur du corps du forum ne change quand je clique sur mon bouton, est-ce que vous auriez une solution? (alors que j'ai un second header plus sombre pour aller avec)
merci d'avance de votre réponse

par **Oka.mi** Ven 5 Nov 2021 - 13:06

Bonjour,

Pour répondre directement à votre question qui est de savoir pourquoi le header du dark-theme ne s'affiche pas, c'est parce que dans votre css, vous avez :

Code:: .headerlm.dark-theme { background-image: url(https://i.imgur.com/ozQWGaV.png); background-size: 760px; height: 285px; width: 760px }

il faudrait plutôt mettre :

Code:: .dark-theme .headerlm { background-image: url(https://i.imgur.com/ozQWGaV.png); background-size: 760px; height: 285px; width: 760px }

Pareil pour les autres éléments du coup.

Autres remarques :

le bouton qui permet de changer de thème, vous l'avez mis directement dans le head. Il faudrait le déplacer juste après l'ouverture du body (donc juste après le <body>), ce sera plus sympa pour le navigateur
Profitez-en pour ajouter l'espace manquant après "moon" et mettre "/>" à la fin pour bien fermer la balise img.
Code:
<img class="moon"src="https://i.imgur.com/UXUmOPm.png">
il y a plusieurs erreurs JavaScript, notamment dans ceux-là :
Code:
<script type="text/javascript">jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');</script>
pas d'élément subforums à modifier, il faudrait ajouter l'id à la variable concernée
Code:
<script type="text/javascript">document.getElementById('lastvisit_posts').innerHTML=document.getElementById ('lastvisit_posts').innerHTML.replace(/Voir les nouveaux messages depuis votre dernière visite/,"Messages depuis la dernière visite");</script><script type="text/javascript">document.getElementById('posts_unanswered').innerHTML=document.getElementById ('posts_unanswered').innerHTML.replace(/Voir les messages sans réponses/,"Messages sans réponses");</script><script type="text/javascript">document.getElementById('mark_read').innerHTML=document.getElementById ('mark_read').innerHTML.replace(/Marquer tous les forums comme lus/,"Tout marquer comme lu");</script>
idem... on ne va pas s'attarder dessus parce que ce n'est pas le sujet mais pour ce deuxième cas, il faut vérifier la présence des éléments que vous modifiez avant de les modifier (donc ajouter "if (document.getElementById('lastvisit_posts'))" par exemple) sinon, sur les pages où ces éléments ne sont pas présents, ça crée des erreurs.

par mlle Ven 5 Nov 2021 - 15:42

bonjour !
merci beaucoup de ton aide Smile

ça semblait marcher en premier lieu, mais soudainement maintenant (pendant que je mettais en place les changements) ça a arrêté de marcher je comprends pas exactement pourquoi >< Shutt

par **Oka.mi** Ven 5 Nov 2021 - 16:06

Dans vos modules javascript, allez dans 99643.js, récupérez ce passage (le dernier)

Code:: const btn = document.querySelector(".btn-toggle"); btn.addEventListener("click", function () { document.body.classList.toggle("dark-theme") });

et avancez-le devant le

Code:: });

qui se trouve juste avant le passage en question.

Ainsi, il bénéficiera du $(function () { précédent et sera exécuté après le chargement de la page. Actuellement, il le fait avant et donc ne trouve pas la variable "btn" :

Pour expliquer ce qui s'est passé schématiquement, ce qui fait qu'avant ça marchait et maintenant non :
<head> <== ancien emplacement de "btn"
Javascript sans $(function... a le temps de trouver "btn"
<body>

Après la modification :
<head>
Javascript sans $(function... ne trouve pas "btn" vu que "btn" intervient après
<body> <== nouvel emplacement de "btn"

D'où la nécessité d'attribuer le $(function au JS, pour le repasser après le chargement de "btn".

par mlle Lun 8 Nov 2021 - 10:30

bonjour

je suis pas sûr que ça soit le problème, parce qu'il est déjà présenter comme ça dans mon module java 16597.js et je n'ai pas de module 99643.js ? est-ce que je dois remettre la template comme avant, avant le <head> ?

Code:: const btn = document.querySelector(".btn-toggle"); btn.addEventListener("click", function () { document.body.classList.toggle("dark-theme") });

par **Oka.mi** Lun 8 Nov 2021 - 10:33

Bonjour,

Pouvez-vous alors me montrer le JavaScript (en entier) où ce passage est présent ? Smile

(Non, il ne faut pas remettre dans le head, on a corrigé quelque chose qu'il ne faut pas faire mais ce n'est pas parce que ça ne marche pas tout de suite qu'il faut remettre l'erreur en place :p)

par mlle Lun 8 Nov 2021 - 10:41

du coup la page ne contient que ça :

Code:: const btn = document.querySelector(".btn-toggle"); btn.addEventListener("click", function () { document.body.classList.toggle("dark-theme") });

par **Oka.mi** Lun 8 Nov 2021 - 10:46

Ok donc je confirme que c'est bien le problème dont j'ai parlé plus haut. C'est juste que de mon côté, je vois la version "regroupée" de vos JavaScripts (99643.js) et j'ai fait l'erreur de vous indiquer de chercher là alors que ça peut très bien être un JS séparé.
Il faut donc modifier le code actuel par ça (j'ai juste ajouté le $(function(){ et les balises fermantes)

Code:: $(function () { const btn = document.querySelector(".btn-toggle"); btn.addEventListener("click", function () { document.body.classList.toggle("dark-theme") }); });