Changer le thème du forum avec javascript (8 couleurs)

[ErynGold]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 31/12/2023
Lien du forum : https://rise-of-the-abyss.forumactif.com/

Description du problème

Bonjour !

Je travaille actuellement sur un script qui permettrait de changer de thème pour le forum. Comme un mode sombre / clair mais cette fois-ci, avec huit couleurs différentes. J'ai récemment trouvé un script (voici le tutoriel : https://xebia.com/blog/themed-website-with-multiple-color-schemes-the-easy-way/) qui pourrait me permettre de faire ce que je veux mais j'ai une erreur sur le code, et n'étant pas très doué en javascript je viens solliciter votre aide.

En haut de mon header, j'ai un menu de boutons permettant de choisir le thème voulu. Voici le code HTML du menu :

Code:

<div class="buttons roa-switch-theme">
            <button id="rouge" class="selected"></button>
            <button id="orange"></button>
            <button id="rose"></button>
            <button id="violet"></button>
            <button id="bleu"></button>
            <button id="vert"></button>
            <button id="clair"></button>
            <button id="sombre"></button>
          </div>

D'après le tuto, lorsqu'on clique sur l'un des boutons, ça lui ajoute une classe "selected" et ça change le schéma appliqué à la div ayant l'id "wrapper". Dans mon cas, la div ayant l'id "wrapper" est la div ayant la classe "main_forum", celle qui englobe tout le forum.

Voilà mon CSS :

Code:

:root {
    --primary: var(--roa-rouge);
    --roa-rouge: #86484A;
    --roa-orange: #BE7A4F;
    --roa-rose: #AB6984;
    --roa-violet: #53466A;
    --roa-bleu: #3C6F90;
    --roa-vert: #5D7363;
    --roa-clair: #CEBC81;
    --roa-sombre: #4D4D54;
    --sombre: #0B0B0B;
    --fond-gris: #7A7A7A;
    --fond-fonce: #171717;
    --couleurBouton: #656565;
}
:root .rouge {
  --primary: var(--roa-rouge);
}
:root .orange {
  --primary: var(--roa-orange);
}
:root .rose {
  --primary: var(--roa-rose);
}
:root .violet {
  --primary: var(--roa-violet);
}
:root .bleu {
  --primary: var(--roa-bleu);
}
:root .vert {
  --primary: var(--roa-vert);
}
:root .clair {
  --primary: var(--roa-clair);
}
:root .sombre {
  --primary: var(--roa-sombre);
}

Et voici le JS :

Code:

function selectSchema(schema) {
  // Select button and unselect the other button
  document.querySelectorAll('button').forEach(el => el.classList.remove('selected'));
  document.getElementById(schema).classList.add('selected');
  
  // Set schema class  
  document.getElementById('wrapper').className = schema;  
}

document.getElementById('rouge').addEventListener('click', (e) => {
  selectSchema('rouge');
});

document.getElementById('orange').addEventListener('click', (e) => {
  selectSchema('orange');
});

document.getElementById('rose').addEventListener('click', (e) => {
  selectSchema('rose');
});

Mon problème est que lorsque je clique sur un bouton, le script n'ajoute pas la classe "selected" au bouton et du coup, ça ne change pas le schéma. Même en mettant "background: var(--primary);" aux endroits concernés, rien ne change et je rencontre cette erreur de javascript dans ma console :

99581.js:1 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at 99581.js:1:2157

Je ne sais pas trop comment m'y prendre. De plus, j'aimerais me servir de ce script pour changer plusieurs images sur l'index quand il fonctionnera (l'image de la PA, la rune sur la PA, la bannière du forum et l'image du QEEL), mais si je n'arrive déjà pas à changer la couleur...

Merci d'avance ! ^^

[Toryudo]

Bonjour !

Très souvent, dans les scripts proposés par Forumactif (et dans d'autres scripts déjà chez vous d'après ce que je vois), vous avez ce morceau de code :

Code:

$(function() {

Qui se ferme un peu plus loin :

Code:

});

Il permet de dire "une fois que toute la page est chargée, alors exécute le code entre "$(function() {" et "});"
C'est indispensable, parce qu'au moment de l'exécution du script (qui se trouve dans le <head>), le id n'existe pas encore puisqu'il se trouve plus loin dans le <body>. Donc si vous corrigez votre script comme ceci, ça devrait fonctionner (en tout cas, ne plus planter) :

Code:

function selectSchema(schema) {
  // Select button and unselect the other button
  document.querySelectorAll('button').forEach(el => el.classList.remove('selected'));
  document.getElementById(schema).classList.add('selected');
 
  // Set schema class 
  document.getElementById('wrapper').className = schema; 
}

$(function() {
  document.getElementById('rouge').addEventListener('click', (e) => {
    selectSchema('rouge');
  });
  document.getElementById('orange').addEventListener('click', (e) => {
    selectSchema('orange');
  });
  document.getElementById('rose').addEventListener('click', (e) => {
    selectSchema('rose');
  });
});

[ErynGold]

Oh merci beaucoup! Ça fonctionne. ^^

Je passe le sujet en résolu! Au revoir. ^^