dark mode / mode sombre

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu dark mode / mode sombre

Message 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


Dernière édition par mlle le Lun 8 Nov 2021 - 21:36, édité 2 fois
mlle

mlle
***

Messages : 129
Inscrit(e) le : 07/10/2012

Voir le profil de l'utilisateur http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: dark mode / mode sombre

Message 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 Smile
    Profitez-en pour ajouter l'espace manquant après "moon" et mettre "/>" à la fin pour bien fermer la balise img. Wink
    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.

Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2728
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: dark mode / mode sombre

Message 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
mlle

mlle
***

Messages : 129
Inscrit(e) le : 07/10/2012

Voir le profil de l'utilisateur http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: dark mode / mode sombre

Message 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" :
dark mode / mode sombre Mlle10

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".
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2728
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: dark mode / mode sombre

Message par mlle Lun 8 Nov 2021 - 10:30

bonjour I love you
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")
});
mlle

mlle
***

Messages : 129
Inscrit(e) le : 07/10/2012

Voir le profil de l'utilisateur http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: dark mode / mode sombre

Message 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)
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2728
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: dark mode / mode sombre

Message 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")
});
mlle

mlle
***

Messages : 129
Inscrit(e) le : 07/10/2012

Voir le profil de l'utilisateur http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: dark mode / mode sombre

Message 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")
  });
});
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2728
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: dark mode / mode sombre

Message par mlle Lun 8 Nov 2021 - 10:48

effectivement le problème est réglé ! I love you I love you
merci beaucoup Clin d\'oeil
mlle

mlle
***

Messages : 129
Inscrit(e) le : 07/10/2012

Voir le profil de l'utilisateur http://concordia-u.forumgratuit.ch/
mlle a été remercié(e) par l'auteur de ce sujet.

Résolu Re: dark mode / mode sombre

Message par Chacha Lun 8 Nov 2021 - 12:26

mlle a écrit:effectivement le problème est réglé ! I love you I love you
merci beaucoup Clin d\'oeil
dark mode / mode sombre MHDoUixBonjour,

Afin de faciliter la gestion des problèmes, si le vôtre est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu et enregistrer
Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton dark mode / mode sombre UsrblLM
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 66962
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum