Thème sombre ne s'applique pas à la CB et autres pages HTML

[Jess Capa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://magicneverdies.forumactif.com/

Description du problème

Bonjour ! J'en appelle à tous les gourous expérimentés du codage ! Je m'excuse par avance si mes explications ne sont pas claires, j'y reviendrai sans soucis si besoin.

* Le contexte: j'ai installé un thème sombre via onclick Toggle Theme: le petit slider qui fait passer du mode jour au mode nuit en un clic. Quand le slider est activé, une class .dark s'ajoute au body du forum et ça change son apparence en fonction du CSS revu par mes soins pour l'occasion. Je n'ai pas encore validé le template, ceci pour pouvoir faire mes tests sans embêter les membres du forum, donc vous ne pourrez rien voir en le visitant. Je vous joins toutefois le script et le HTML issus du template overhall_header pour que vous ayez une vue d'ensemble du bazar.

Code:

<div class="switch"><button class="slider" onclick="toggleTheme()"></button></div>

Code:

<script>function toggleTheme() {
document.body.classList.toggle("light");
document.body.classList.toggle("dark");
localStorage.setItem("colorTheme",document.body.classList.contains("dark") ? "dark" : "light");}
if (localStorage.getItem("colorTheme") === "dark") {toggleTheme();}
else if (localStorage.getItem("colorTheme") !== "light" &&window.matchMedia &&window.matchMedia("(prefers-color-scheme: dark)").matches) {toggleTheme();}</script>

* Problème: Il semblerait que le script n'a aucun effet sur le contenu des iframes comme celui de la CB, de la page d'accueil, et tout autre document HTML. Pour retoucher les class de la CB qui sont concernées, je dois préalablement appeler la class .dark. Cette dernière devrait apparaître sur le body de la CB, mais comme le script ne fonctionne pas sur les documents HMTL contenus par les iframes, la class .dark est absente de son body. Je ne peux donc pas effectuer mes modifications comme je le souhaiterais. Y'a-t-il une solution à ce problème afin de faire en sorte que mon script affecte également les documents à l'intérieur des iframes et que mon CSS .dark puisse les atteindre en conséquence ?

Précision: J'ai déjà tenté de placer le script via la gestion des codes javascript dans la partie "modules" du panneau d'admin, activé sur toutes les pages. Ca ne résout rien et induit d'autres soucis tels que:

- interférence avec un autre script présent sur l'affichage d'un sujet (ça ne pose aucun problème quand le script est installé dans overhall_header bizarrement),
- quand j'arrive à bidouiller le script pour le faire fonctionner en partie sur la CB et autres pages HTML, soit le bouton/slider n'est plus cliquable, soit le thème choisi n'est plus gardé en mémoire et quand on rafraichit la page on revient sur le thème clair systématiquement, soit certaines class du thème dark persistent quand on rebascule vers le thème clair et inversement, et dans ce cas il faut rafraichir la page puisque le bouton/slider ne suffit pas à opérer tous les changements. Dans tous les cas aucune de mes tentatives ne fonctionne en installant le script via la gestion des modules.

Voilà voilà, j'ignore si c'est faisable mais je m'en remets à vous pour le moment. Merci d'avance pour votre temps !

[Jess Capa]

Petit up ! J'ai simplifié et reciblé ma demande, mon principal problème étant de pouvoir appliquer le style sombre aux pages HTML comme la CB ou la page d'accueil. Merci d'avance !

Edit: Je suis tombée sur ce tuto du staff pour appliquer un sélecteur de thème sur son forum. La méthode employée est totalement différente, toutefois je comprends qu'une "adaptation" est prévue pour les pages HTML comme la CB et la page des smileys, plus précisément cette partie:

Code:

 $("#frame_chatbox").load(function(){
    $("#frame_chatbox").contents().find("head").append($("#tstyle").clone());
  });

  $("iframe[name=smilies]").load(function(){
    $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{margin:0!important;}</style>');
  });

et sans doute celle-là :

Code:

function changestyle(cssurl) { my_setcookie('sstyle',$('#tstyle')[0].href=cssurl,1,0); $('#frame_chatbox,iframe[name=smilies]').contents().find('#tstyle').attr('href',cssurl); }

(je vous rappelle que je patauge avec le javascript, d'où ma présence ici :/ script du tuto dans son entièreté ici )

Y'a-t-il un moyen de lier le code du premier post avec les éléments de celui-ci pour rendre cela possible ? Ou ça n'a vraiment rien à voir et il faut tout revoir ?
Voilà, dans le doute je pose ça là... Merci !

[Jess Capa]

Petit up du jour

[Jess Capa]

Up

[Jess Capa]

Up

[Jess Capa]

up

[Jess Capa]

Bon... Je me suis débrouillée autrement. Je passe en résolu ^^