Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Alexoune001, Clouder, Jerem971, Nymos
Auteur Sujet: Mode nuit en JS

Nymos

Messages: 1

<span class="label-text" onclick="document.getElementById('body').style.backgroundColor='#292929';">


Le code JS ci-dessus permet d'activer le mode nuit et fonctionne très bien, mais je ne trouve pas de solution pour revenir en arrière le background d'origine. Si quelqu'un pourrais compléter mon code ci-dessus avec la solution svp
Publicité

Clouder

Messages: 113

Salut @Nymos !

Pour ton problème de mode clair / sombre tu as plusieurs solutions ! 😅

1. Lorsque tu cliques sur ton bouton tu mets une variable à VRAI et tu affiches ton thème sombre et lorsque tu recliques dessus tu mets ta variable à FAUX et tu affiches ton thème clair. Le problème c'est que lorsque tu vas rafraîchir ta page tu perdras cette information.

2. Tu peux faire un mélange JavaScript / Ajax ou la tu appelles une page .php pour enregistrer ton information dans une BDD en indiquant que le fichier CSS et le thème sombre

3. Tu peux également mettre ça en Cookie comme ça pas de BDD mais il ne faut pas que l'utilisateur vide ou n'accepte pas les cookies de ton site ^^
 

Nymos

Messages: 1

Merci pour ton aide intéressante mais pourrais-tu me donner des exemples de codes ? 😉

Clouder

Messages: 113

Je vais faire un tuto comme ça tu pourras avoir le code et tout ce qu'il te faut ! Dès que c'est fait je te préviens 😀 

Jerem971

Messages: 583

Hello @Nymos,

Je vais faire un tuto comme ça tu pourras avoir le code et tout ce qu'il te faut ! Dès que c'est fait je te préviens
@Clouder, OUI, OUI et OUI ! Moi je suis impatient d'apprendre comment faire parce que hier j'ai effectué la mise à jour de l'application YouTube sur Android et on a enfin eu le mode thème sombre (ce qui m'a donné envie de le mettre pour les sites web de mes clients, c'est devenu une tendance ce mode). J'attends encore ce mode pour PrimFX.com mais Boris n'est pas encore disponible...

J'espère que ton tuto va m'aider à apprendre à le réaliser, impatient de voir ça ! 😍
Et merci @Nymos pour ton topic, ça m'a justement éviter d'en créer un car j'allais justement poser cette question ! 😉

Clouder

Messages: 113

Tu vas voir @Jerem971, ma méthode est vraiment simple 😂

Pour te donner une idée de comment faire : 
- tu proposes un petit formulaire avec deux inputs de type radio
- Ensuite dans ta BDD, tu crées un nouveau champ theme de type int(2)
- Après tu crées 2 fichiers CSS (ex: light.css & dark.css)
- Dans ton formulaire tu retiens le choix de ton utilisateur et tu réactualises la variable de session qui te permet de faire le switch entre les deux thèmes 

C'est une solution pour les utilisateurs qui s'inscrivent sur un site !

Après tu peux le faire avec les Cookies et aussi via l'heure de ton site pour un basculement automatique 😀

PS: La vidéo arrive bientôt ! 😇

Jerem971

Messages: 583

Re:

Je préfère le faire avec les cookies parce que le SQL, je déteste ce langage (je m'y fait vraiment pas), j'espère que ton tuto va bien m'éclairer car je suis à 5% d'apprentissage du PHP ! 😉

Clouder

Messages: 113

Re @Jerem971

J'ai publié la vidéo pour basculer d'un thème clair à un thème sombre : ICI 😁

[video]8wRwQrHjzVg[/video]

J'en ferai une autre avec l'utilisation des Cookies ! C'est encore plus simple 😆

Jerem971

Messages: 583

Re:

Je suis allé voir et c'est pas mal, il te manque une intro pour que ça donne du flow ! 😎 En plus c'est très bien expliqué ! 😌 Mais j'attends quand même la version avec les cookies et ensuite je verrais en fonction des 2 vidéos laquelle je choisirai ! 😉


Vous devez vous connecter ou créer un compte pour poster une réponse