Bouton pour changer de thème

Bonjour,

Mon site codé à la main avec bootstrap est actuellement avec un thème sombre et j'aimerai faire un bouton pour pouvoir passer à un thème clair et bien sûr que ça reste après un changement de page comme sur ce site par exemple : https://top.gg

Mes problèmes sont les suivants :
- J'ai aucune idée de comment m'y prendre.
- J'ai fait un 2ème fichier CSS dans lequel j'ai retirer les 2 lignes de codes qui faisait le thème sombre, y a-t-il plus simple/léger que de charger un autre CSS ?

J'ai trouvé ce tutoriel https://www.thesitewizard.com/javascripts/change-style-sheets.shtml mais mon anglais étant limité ce n'est pas très clair, de plus c'est pour avoir 2 boutons et non un genre d'interrupteur comme sur https://top.gg.

Salut,
Tu as la solution dans le site que tu donnes top.gg. En utilisant les outils de debug de Firefox par exemple, tu peux analyser ce qu'il se passe lorsque tu cliques sur le bouton. Tu trouveras un appel à une fonction et cette fonction est déclarée dans le code de la page.

En analysant ce fonctionnement, tu devrais pouvoir l'adapter à ton besoin.

Il y a plusieurs de manières de le faire. Une de ces manières consiste à se baser sur la classe d'un élément parent à tous (body par exemple). Lorsque tu veux passer sur du dark/light mode tu n'as qu'a changer sa classe et tous les styles des éléments enfants se mettront à jour.

Je t'ai fait un exemple assez simple https://jsbin.com/jecuvim/edit

Ensuite par rapport à la persistence du thème, là encore y a plein de façons de s'y prendre. Tu peux stocker la préférence de l'utilisateur dans les cookies ou le localStorage par exemple, à toi de voir.

@Ostara
J'ai essayé de faire comme tu ma dit, j'ai bien le bouton qui va bien mais quand je clique dessus il ne se passe rien
Voilà le lien ou je fait le test : https://breat.fr (bouton tout en bas à droite)

@mir8
ta solution est effectivement simple à priori mais nécessite d'ajouter un class à toutes les pages du site dont un peu "casse pied"

pour ce qui est des cookies ou localstorage j'ai aucune idée de comment faire, je n'ai jamais utiliser ces outils
Modifié par Breat (04 Jul 2020 - 13:16)

Ben pas forcément, ca dépend de comment tu sers ton site (SPA/SSR) et de comment fonctionne ton rendu (framework ou pas, bundler, etc) mais lorsque j'intègre cette solution c'est pas très contraignant.

Sinon lorsque le bouton est cliqué, rajoute ou enlève une stylesheet qui override celle que tu utilises par défaut.

Par rapport à la persistence, une des manières assez simples de le faire en ne touchant qu'au front c'est le localStorage.

Quand le thème est changé

window.localStorage.setItem('isDarkModeEnabled', /* true ou false */)

Et lorsque une page se charge, tu demandes au localStorage ce que préfère l'utilisateur

window.localStorage.getItem('isDarkModeEnabled')

Breat a écrit :
@Ostara
J'ai essayé de faire comme tu ma dit, j'ai bien le bouton qui va bien mais quand je clique dessus il ne se passe rien
Voilà le lien ou je fait le test : https://breat.fr (bouton tout en bas à droite)

En fait ça fonctionne. C'est simplement que ton css https://static.breat.fr/css/theme-clair.css ne fait rien de visible.

Il manque un script en début de page qui va charger le css en fonction de la valeur dans localstorage.
Modifié par Ostara (04 Jul 2020 - 16:23)

@mir8
Je dois les mettre dans le head ces 2 lignes de code ?

@Ostara
Si, dans le fichier CSS theme-clair.css, j'ai supprimé les 2 lignes suivantes dans body :

background-color: rgb(26, 26, 26) !important;
color: rgb(184, 191, 198) !important;

Quel script ? Celui que mir8 m'indique ?

Sachant que sur mon site c'est le mode sombre par défaut.

Désolé pour ces questions débutantes, comme indiqué dans le 1er post j'ai jamais fait ça.
Modifié par Breat (04 Jul 2020 - 16:34)

Pas nécessairement, tu les mets la ou tu fais ta logique de toggle.

Il faut un premier script qui se charge au début et qui check si une variable du style "isDarkThemeEnabled" est présente dans le localStorage (avec getItem) et selon ce à quoi elle est égale, tu changes le thème ou pas.

Ensuite lorsque l'utilisateur va cliquer sur ton toggle il faudra que tu mettes à jour cette variable (avec setItem) et changer le thème.

Sans m'attarder, j'avais fait ça en jQuery à l'époque : themes (sauvegarde avec localStorage).
Le code : Themes.js on github.

C'est bon ça fonctionne, ENFIN merci à vous.

Sinon j'avais aussi essayé (sans succès xD ) de faire 3 fichiers CSS, comme ceci :
- style.css : tout le css du site SAUF body
- dark.css : QUE body avec thème sombre
- light.css : QUE body avec thème clair

chargés comme ceci :

<link href="https://static.breat.fr/css/style.min.css?cachekiller=<?php echo date('dmYHi'); ?>" rel="stylesheet" type="text/css">
<link href="https://static.breat.fr/css/dark.min.css" rel="stylesheet" type="text/css">
<link href="https://static.breat.fr/css/light.min.css" rel="alternative stylesheet" type="text/css">

l'idée était de charger qu'une seule fois le style body en fonction du thème choisis mais ça ne fonctionnait pas car seul le 1er css était chargé. une idée ?

@Ostara et @mir8
Ok je ne savais pas qu'il fallait le remplacer et non le supprimer.
Oui le !important est un reste de tests précédents et je peux tout à fait le virer.

Pour le sctipt en début de page de top.gg, oui je ne l'ai pas mis volontairement car il est en pied de page avec ceci en plus :

addDTToHeader()

, j'en ai donc "mal" déduit qu'il venait en haut de page dynamiquement.

@Olivier C
Merci pour les liens, je vais y jeter un oeil.
Modifié par Breat (05 Jul 2020 - 10:40)