Basculer entre deux feuilles de style

Salut à tous,

Le débutant que je suis viens faire appel à vos lumières.

J'ai créé sur l'intranet de mon travail un second thème en css.
J'ai récupéré un bouton switch dont le design me convient bien.

Code:

---

1 2 3 4 5 6 7 8

<link rel="stylesheet" type="text/css" href="styledev.css" id="clair" /> <link rel="alternate stylesheet" type="text/css" href="darkstyledev.css" id="sombre" />     <label class="switch"> <input type="checkbox" name="theme" id="theme"> <span class="slider round" onclick="changetheme('darkstyledev.css')"></span> </label>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<script> function changetheme(style){   var bouton = (theme.checked);   if (bouton === true){ document.getElementById("sombre").setAttribute("href", style); } else document.getElementById("clair").setAttribute("href", style); } </script>

---

Mon script actuel fonctionne partiellement, c'est-à-dire que lorsque je clique sur le switch, le changement de style s'opère bien.
Mais j'aimerais pouvoir revenir au précédent style en "déswitchant" !

Je pense que mon problème vient du fait que j'appelle dans le onclick le paramètre de la fonction qui définit l'un des deux styles.
Et là je suis bloqué, je ne trouve pas de solution. Pourriez-vous me mettre sur la voie ?

Merci par avance !

J'ai tenté un truc comme ça, mais ça ne fonctionne pas. Je m'y perds...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<script> bouton = (theme.checked);   function style1(style){ if (bouton === false){ document.getElementById("clair").setAttribute("href", style); } }   function style2(style){ if (bouton === true){ document.getElementById("sombre").setAttribute("href", style); } } </script>

---

Code:

---

1 2 3 4

<label class="switch"> <input type="checkbox" name="theme" id="theme"> <span class="slider round" onclick="style1('styledev.css'),style2('darkstyledev.css')"></span> </label>

---

Bonjour,
il y aurait bien des choses à dire mais restons sur l'essentiel.

Il te faut mettre la gestion de l'événement sur l'<input> et pas ailleurs.

Code:

---

1 2 3 4

<label class="switch"> <input type="checkbox" name="theme" id="theme" onclick="changeTheme(this)"> <span class="slider round"></span> </label>

---

dans la fonction changeTheme, le paramètre passé, this, est en fait l'<input> lui même, il te suffit donc de surveiller son état et d'agir en conséquence.

Code:

---

1 2 3 4

function changeTheme(obj) { const etatBouton = obj.checked; alert("état : " + etatBouton) }

---

Bonjour et merci pour ton aide,

J'avais mis le onclick dans le span :scarymov:

Bon j'ai revu mon script et aussi j'ai supprimé ma balise link alternative qui m'induisait en erreur !

Code:

---

1 2 3 4 5 6 7 8 9 10

<script> function changeTheme(obj) { const etatBouton = obj.checked; if (etatBouton === true){ document.getElementById("style").setAttribute("href", "darkstyledev.css"); } else { document.getElementById("style").setAttribute("href", "styledev.css"); } } </script>

---

Code:

---

<link rel="stylesheet" type="text/css" href="styledev.css" id="style" />

---

Ca fonctionne impec ! Merci !