Mode nuit en JS

Nymos

Nymos Le 14 août 2018 à 21:20 (Édité le 25 janvier 2019 à 17:54)

<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
Clouder

Clouder Le 21 août 2018 à 16:29

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

Nymos Le 23 août 2018 à 17:44

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

Clouder Le 13 septembre 2018 à 13:51

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 😀 
Profil introuvable

Profil introuvable Le 13 septembre 2018 à 17:45

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

Clouder Le 14 septembre 2018 à 14:38

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 ! 😇
Profil introuvable

Profil introuvable Le 15 septembre 2018 à 00:05

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

Clouder Le 19 septembre 2018 à 10:57 (Édité le 19 septembre 2018 à 10:59)

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 😆
Profil introuvable

Profil introuvable Le 21 septembre 2018 à 01:17

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

Clouder Le 28 septembre 2018 à 22:43

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

Profil introuvable Le 29 septembre 2018 à 00:25

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

Clouder Le 8 octobre 2018 à 15:03

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)
Profil introuvable

Profil introuvable Le 9 octobre 2018 à 01:26

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

Clouder Le 10 octobre 2018 à 10:20

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 ! 😀
Profil introuvable

Profil introuvable Le 11 octobre 2018 à 01:51

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

Clouder Le 11 octobre 2018 à 10:14

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 😁
Profil introuvable

Profil introuvable Le 12 octobre 2018 à 01:19

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

Clouder Le 12 octobre 2018 à 14:35

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 être connecté pour poster une réponse. Se connecter ou Créer un compte