Changement de thème du site

à la volée en jquery

Sujet résolu

22 novembre 2021 à 22:18:26

Bonjour, je tente de mettre en place un changement de thème css de mon site à la volée.

J'ai une feuille de style unique qui se charge au début où j'ai quelque chose comme cela :

:root, [data-theme="light"] {
    --color-background: #fff;
    --color-text: #333;
    --color-primary: #2ca84d;
    --color-secondary: #0c6624;
    --color-grey: orange;
}

[data-theme="dark"] {
    --color-background: #333333;
    --color-text: #b6b6b6;
    --color-primary: tomato;
    --color-secondary: #bd2130;
    --color-grey: yellow;
}

body {
  font-family: Roboto, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
}

Du coup en début de script je déclare le thème que je veux comme ceci :

<body data-theme="dark">
    <header>
...
</body>

ou comme cela

<body data-theme="light">
    <header>
...
</body>

Et j'ai le style souhaité. Du coup, quand à d'éventuelle modifications de style d'un thème ou plusieurs thèmes, je n'ai pas à modifier 20 fichier mais un seul.

Le truc c'est que je veux puvoir modifier le style à la volée. J'ai donc réalisé un script comme ceci:

<div id="liste_themes">
    <select class="choose_theme">
    <?php
    $array_themes=array('light'=>'Light','dark'=>'Dark');
    foreach($array_themes as $key => $value) { ?>
        <option value="<?php echo $key;?> >"><?php echo $value;?></option>
        <?php } ?>
    </select>
    <script>
    $(".choose_theme").change(function() {
        // je récupère l'option choisie
        var new_theme=$(this).find("option:selected").val(); 
        
         // je vérifie que l'on a bien récupéré la valeur en console 
         console.log(old_theme + ' - ' + new_theme);
        
        // je tente de changer la valeur du data-theme qui se trouve dans le body, mais c'est là où ça coince... ça ne se met pas à jour
        $('body').data('theme',new_theme);

         
    return false;
    });
    </script>

Sur le navigateur, quand je change à la main le data-theme qui se trouve dans le body à l'aide des outils développeur de dark à light ou inverssement, le changement se fait instantanément, mais je n'arrive pas à le réaliser avec mon petit script...

Voyez vous une erreur ?

-
Edité par HugoPaqueto 22 novembre 2021 à 22:25:23

SamuelGaborieau3

23 novembre 2021 à 11:02:45

Bonjour, la variable old_theme dans le morceau de Javascript a l'air d'être déclaré nulle part.

Lorsque tu ouvre ta console de développement et que tu utilises ton menu select pour changé le thème est-ce que tu voit apparaitre le console.log avec les valeurs old_theme et de new_theme ? Est-ce que les valeurs sont corrects ? Est-ce que tu reçoit un message d'erreur dans la console ?

A noté que je n'utilise plus jQuery et que je ne connais pas bien la méthode .data mais quand je lit la documentation de la méthode .data de jQuery elle m'indique:

EN - "Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr."

FR - "L'utilisation de la méthode data() pour mettre à jour les données n'affecte pas les attributs dans le DOM. Pour définir une valeur d'attribut data-*, utilisez attr."

Là où attr. et une référence à la méthode .attr de jQuery.

Visiblement la méthode .data n'a pas l'air d'être fait pour modifié des attributs du documents (et elle ne le fait surement pas).

En Javascript natif tu peut modifié un attribut via:

document.querySelector('body').setAttribute('data-theme', new_theme);

Et en jQuery avec la méthode .attr tu doit pouvoir l'écrire de cette façon:

$('body').attr('data-theme', new_theme);

suggestion de présentation.

Lamecarlate

23 novembre 2021 à 12:04:23

Bonjour,

attention à un point, qui viendra dans le futur : il faudra stocker la valeur "light" ou "dark" quelque part, sous peine de revenir au thème de base dès le rechargement de la page.

Pour ma part, je me suis inspirée de https://mxb.dev/blog/color-theme-switcher/ qui explique très bien comment il a fait son theme switcher (c'est assez dense et tu peux passer toute la partie sur la construction des thèmes eux-même, en allant là : https://mxb.dev/blog/color-theme-switcher/#h-setting-the-theme directement).

Pas d'aide concernant le code par MP, le forum est là pour ça :)

HugoPaqueto

23 novembre 2021 à 19:57:02

SamuelGaborieau3 a écrit:

Bonjour, la variable old_theme dans le morceau de Javascript a l'air d'être déclaré nulle part.

Lorsque tu ouvre ta console de développement et que tu utilises ton menu select pour changé le thème est-ce que tu voit apparaitre le console.log avec les valeurs old_theme et de new_theme ? Est-ce que les valeurs sont corrects ? Est-ce que tu reçoit un message d'erreur dans la console ?

A noté que je n'utilise plus jQuery et que je ne connais pas bien la méthode .data mais quand je lit la documentation de la méthode .data de jQuery elle m'indique:

EN - "Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr."

FR - "L'utilisation de la méthode data() pour mettre à jour les données n'affecte pas les attributs dans le DOM. Pour définir une valeur d'attribut data-*, utilisez attr."

Là où attr. et une référence à la méthode .attr de jQuery.

Visiblement la méthode .data n'a pas l'air d'être fait pour modifié des attributs du documents (et elle ne le fait surement pas).

En Javascript natif tu peut modifié un attribut via:
document.querySelector('body').setAttribute('data-theme', new_theme);
Et en jQuery avec la méthode .attr tu doit pouvoir l'écrire de cette façon:
$('body').attr('data-theme', new_theme);

Géant !!! Merci, ça marche impec ! Pour garder le thème en mémoire, j'utilise un système de "pseudo cookie" à moi sous forme de sessions php qui sont régénérées de façon fluide mais je regarderai le lien de toute façons. Merci !!