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: 144

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: 144

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: 656

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: 144

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: 656

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: 144

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: 656

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 ! 😉

Clouder

Messages: 144

Re: J'avoue que j'ai pas d'intro x)

Jerem971

Messages: 656

Re:

C'est vrai les intros c'est ce que j'ai toujours aimé quand j'étais petit surtout des dessins animés connus comme Code Lyoko, Martin Mystère, Totally Spies!, Team Galaxy, American Dragon et bien d'autres...
Donc c'est ce qui m'a donné envie également d'aimé les intros YouTube mais je n'ai jamais été interressé par l'animation 😂 Juste j'adore les intros c'est tout. C'est ce qui me donne envie de regarder des vidéos encore et encore, quand y'a pas d'intros, ça me motive pas assez...

PS: Tu comptes finalement faire la vidéo avec les cookies cette fois-ci ?

Clouder

Messages: 144

Re:

J'avoue qu'une intro c'est quand même le top surtout si elle est bien faite, du coup je suis en train d'essayer d'en faire une potable x)

PS: Tu comptes finalement faire la vidéo avec les cookies cette fois-ci ?
Oui 😀
J'ai refait le plein de vidéos mais en ce moment  j'ai surtout avancé sur mon site avec de grosses m.a.j qui devraient arriver prochainement (j'espère la semaine prochaine)

Petit indice : c'est la messagerie en interne ! Du coup imagine le fonctionnement qu'il doit y avoir derrière x)

Jerem971

Messages: 656

Re:

Trop cool, j'en ai marre de voir Discord partout sur les forums et les sites (d'ailleurs je te l'avait déjà dit il y a longtemps...), une p'tit chat fait maison c'est toujours mieux et ça m'évite de m'inscrire sur Discord...
Bref j'ai hâte de voir cette nouvelle MAJ ! 😉 Et surtout la vidéo avec le thème sombre/clair avec les cookies ! 😉

Clouder

Messages: 144

Re:

Oui, tu me l'avais déjà dit ! 😀

En toute logique c'est prêt je peux mettre en prod dès ce soir ... mais je ne sais pas si je le ferai ou plutôt vers le week-end 😂
Sur le tchat, j'ai enlevé la possibilité d'écrire en gras, italique, etc. j'ai uniquement laissé les liens de vidéo YouTube, les liens, les images et le code.

Je réalise la vidéo ce soir ! 😀
Publicité

Jerem971

Messages: 656

Re:

En toute logique c'est prêt je peux mettre en prod dès ce soir ... mais je ne sais pas si je le ferai ou plutôt vers le week-end
Cool, je passerais voir alors 😉

Sur le tchat, j'ai enlevé la possibilité d'écrire en gras, italique, etc. j'ai uniquement laissé les liens de vidéo YouTube, les liens, les
images et le code.
Mais pourquoi ? Au contraire ça aurait été un p'tit plus. Base-toi sur WhatsApp et regarde ils ont laissé cette possibilité pourquoi ne pas la mettre ? 😕

Je réalise la vidéo ce soir ! 
Cool je verrais quand j'aurais du temps devant moi 😉

Clouder

Messages: 144

Re: 

Cool, je passerais voir alors 😉
Oui 😀 Tu me diras ton ressenti !

Mais pourquoi ? Au contraire ça aurait été un p'tit plus. Base-toi sur WhatsApp et regarde ils ont laissé cette possibilité pourquoi ne pas la mettre ? 😕
Bon alors je laisserai tout ça 😜

Cool je verrais quand j'aurais du temps devant moi😉
Je vais la mettre ce midi 😁

Jerem971

Messages: 656

Re:

Oui  Tu me diras ton ressenti !
Comme toujours 😉

Bon alors je laisserai tout ça 
Ben oui c'est la base quand même 😆 Même si c'est pas très utilisé, ça peut toujours servir pour certaines personnes 😉

Je vais la mettre ce midi 
Cool je vais la voir alors 😉 Merci pour tout ce que tu fait 😉

Clouder

Messages: 144

Re: 

Comme toujours 😉
Merci 😀

Ben oui c'est la base quand même  Même si c'est pas très utilisé, ça peut toujours servir pour certaines personnes  
Je confirme 😂

Cool je vais la voir alors 😉 Merci pour tout ce que tu fait 😉
De rien 😀 
Comme ça j'ai des idées de vidéos à faire auquel je n'avais pas pensé ! 😃


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