Html, Css et Javascript : toggle dark mode (demande de vérification)

crap0 · 25-01-2024 03:16:00

Bonjour
voilà, j'ai suivit un tuto qui m'avait l'air bien après en avoir essayé d'autres, pour mettre mon site en Light ou Dark mode.
Mais, cela ne fonctionne pas. Le changement ne s'oppére pas.
Par défault: c'est le Dark mode .. Le boutton devrait passé se mode vers le Light Mode.
Pour éviter un flash lors de passage entre les deux le body a visibility: hidden; opacity: 0 qui sont réinitialisé par la première partie du javascript.
A part le passage entre les deux modes : j'ai l'impression que tt fonctionne: détection du mode de mon navigateur, dark mode par défault et visibility: hidden; opacity: 0 sont bien réajuster en visibility: visible; opacity: 1.
Pourriez vous m'aider ? svp.

Voici le fichier html simplifié (sont imbriqués: le css et les javascripts et le lien d'ou sort l'exemple est dans le body...) :

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {visibility: hidden; opacity: 0; background-color: var(--back); color: red;}

    </style>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = localStorage.getItem("theme") || false;

  if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) document.documentElement.setAttribute("data-theme", theme);

  document.body.style.visibility = 'visible';

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  localStorage.setItem( "theme" , newTheme );

};

    </script>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="https://thomas-francois.fr/creer-un-night-mode-avec-les-variables-css-et-javascript-localstorage/" target="_blank">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

</body>

</html>

Merci d'avance !..

Dernière modification par crap0 (25-01-2024 04:52:02)

VBrice · 25-01-2024 18:00:44

Bonjour,

Tu doit placer tes balises script à la fin juste avant la balise </body>, pas dans le header.

Je vois pas l'utilité d'utiliser visibility, puisque le contenue de ton body reste identique et les attributs sont mit et à 'visible' et ne change pas dans le code javascript.

Pour la transition du theme il faut ajouter la règle css

body {transition: background-color 1s;}

Par contre si tu veux un fondu lors du 1er chargement de la page tu peut utiliser:

body {transition: background-color 1s, opacity 2s;}

si tu cherche une transition du contenu lors du switch de thème, on pourrait utiliser un setTimeout à l’événement du boutton. As toi de voire, c'est très subjectif :

document.getElementById('darkMode').onclick = () => {

  document.body.style.opacity = 0;

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  localStorage.setItem( "theme" , newTheme );

  setTimeout(function(){document.body.style.opacity = 1;},500);

};

Je trouve bien aussi sans mettre le setTimeout personnellement :

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {opacity: 0; background-color: var(--back); color: red;

transition: background-color 1s, opacity 1s;}

    </style>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="https://thomas-francois.fr/creer-un-night-mode-avec-les-variables-css-et-javascript-localstorage/" target="_blank">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = localStorage.getItem("theme") || false;

  if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) document.documentElement.setAttribute("data-theme", theme);

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  localStorage.setItem( "theme" , newTheme );

};

    </script>

</body>

</html>

De mon coté, si mon navigateur à le thème foncé, la page est dark et si il as le thème claire, la page est light.
Enfin, si tu veut absolument le dark thème par défaut autant le définir au chargement:

document.addEventListener("DOMContentLoaded", () => {

  localStorage.setItem( "theme" , 'dark' );

  let theme = localStorage.getItem("theme") || false;

  if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) document.documentElement.setAttribute("data-theme", theme);

  document.body.style.opacity = 1;

});

PS: le cache du navigateur peut jouer des tours, nettoie le si nécessaire.

Dernière modification par VBrice (25-01-2024 18:59:27)

crap0 · 30-01-2024 12:17:10

Merci.
effectivement, ça marche.

Now, si j'ai un lien qui renvoie une page de mon site. Arrivé à la page pointé par ce lien, je dois reconfirmer mon choix de mode.
Par exemple par default mon mode est Light. J'active sur ma première page le mode Dark.
Arrivé à la seconde, le mode Light est à nouveau selectionné..
Et:
le choix de mode de chaque page à l'air persistant l'une indépendamment de l'une de l'autre.
Ainsi si je navigue sur plusieurs page ou sur l'un et l'autre j'ai activé le mode Dark, au passage sur une page ou je ne l'ai pas activé ce mode et venant d'une page ou par contre celle-ci le mode a été activé, je passe du dark au light.
autrement dit et plus simplement (lol) passé d'un mode à l'autre de mode n'affecte pas le choix pour les autres.

Y a t-il une solution ?

Le tutoriel dont j'ai mentionné le lien dans mon exemple de html dans le premier message, m'avait l'air de ne pas avoir ce comportement non recherché.. Je me trompe ?

Donc pour le moment, la navigation n'est pas optimal.. Mais en tout cas déjà un grand merci: y a des erreurs de rectifié !

C.
à bientôt

VBrice · 30-01-2024 19:04:34

Bonjour,

Dans ce cas il ne faut pas garder la ligne
localStorage.setItem( "theme" , 'dark' ); de l’évènement DOMContentLoaded,
le thème sera donc charger avec le choix de la page précédente.

Et on ajoute une condition pour le dark par default (lors de la première ouverture de la page, quand le thème n'est pas encore défini):

  if (theme) {document.documentElement.setAttribute("data-theme", theme);}

  else{document.documentElement.setAttribute("data-theme", "dark");}

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {opacity: 0; background-color: var(--back); color: red;

transition: background-color 1s, opacity 1s;}

    </style>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="https://thomas-francois.fr/creer-un-night-mode-avec-les-variables-css-et-javascript-localstorage/" target="_blank">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = localStorage.getItem("theme") || false;

  if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) {document.documentElement.setAttribute("data-theme", theme);}

  else{document.documentElement.setAttribute("data-theme", "dark");}

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  localStorage.setItem( "theme" , newTheme );

};

    </script>

</body>

</html>

J'ai fais quelque teste en suppriment les données des site et le cache pour ne pas garder en mémoire les valeurs stocker.
C'était se que tu souhaitais?

Dernière modification par VBrice (30-01-2024 19:27:17)

crap0 · 31-01-2024 01:38:06

hmm ..
Chez moi, c'est pas le cas.
J'ai créer un dossier test avec 4 pages identique au code donné dans ton post #4, juste ici au dessus ... Les 4 pages reliée entre elles.
J'efface la cache régulirement.
Je suis sur Firefox avec un théme du browser en Light et suppression de la cache à chaque fermeture du logiciel..
Pour tester je ne peux pas meiux faire je pense..

Le choix sélectionné par une page ne le transmet à la suivante.
Le mode Dark qui est privilégié revient toujours a chauque chargement malgrès avoir activé le mode light précédement.

Aurais je zappé un truc ?
J'ai tout relu et refais les différentes étapes pour finir par un copier coller comme dit plus haut ...

VBrice · 31-01-2024 11:32:48

Bopnjour,

J'ai l'impression que localstorage ne vois pas les pages comme appartenant au même domaine sous firefoxe, à l'inverse de sessionstorage.
Sur MS Edge j'ai bien le résultat escompté avec les 2.

Voici le code modifier avec session storage

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {opacity: 0; background-color: var(--back); color: red;

transition: background-color 1s, opacity 1s;}

    </style>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="969.htm" target="">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = sessionStorage.getItem("theme") || false;

if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) {document.documentElement.setAttribute("data-theme", theme);

       sessionStorage.setItem( "theme" , theme );}

    else{document.documentElement.setAttribute("data-theme", "dark");

    sessionStorage.setItem( "theme" , "dark" );}

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  sessionStorage.setItem( "theme" , newTheme );

};

    </script>

</body>

</html>

Je vais regarder cette après-midi si ce sont pas une extension de firefox qui me fous le bazard.

crap0 · 31-01-2024 12:23:52

Yes, mrci.
Ce précédent code fonctionne (sur Firefox et Qutebrowser)
Le choix précédent du mode est persistant durant la navigation sur le site.

Peux tu me rappeler ce que je doit changer ou enlever si je désire de ne pas avoir par défault le mode Dark ?

Secondo:
C'est quoi le plus logique ?
Mettre le script dans chaque page html à la fin du body (comme les exemples plus haut)
Ou d'appeler le script JavaScript avec :
<script src="mode.js"></script>
(Aussi à la fin du body de chaque page)
(of course, ici est retranscrit le bout de code dans un fichier nomé mode.js)
?

Troisièmement et pour finir...
J'ai un deuxième bout de code JavaScript... pour certains paramétres d'affichage en fonction de la taille de la fenêtre du browser.
Dois je les laissé disctinct dans deux balises ou fichier différents.. Ou puis je tout réunir en un bloc si je puis dire.

En tout cas gand merci.

Je revendrai d'ici peu cloturer avec un message récapitulatif et surement un [Résolu] dans le titre du fil.

Merci à toi , VBrice.
Je posterai peut-être le site une fois mis en ligne : c'est pour mon taf, je suis artiste dessinateur... qui sait ! lol

a+

VBrice · 31-01-2024 14:05:57

Bonjour, le soucis ne venait pas des extensions de firefox, en faite le localStorage de la 2eme page ne voyait pas le localStorage de la 1ere. Mais si on utilise un serveur apache, les 2 appartiennent au même domaine (localhost/...) et cela fonctionne, donc les 2 codes sont opérationnel:

avec localStorage:

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {opacity: 0; background-color: var(--back); color: red;

transition: background-color 1s, opacity 1s;}

    </style>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="https://thomas-francois.fr/creer-un-night-mode-avec-les-variables-css-et-javascript-localstorage/" target="_blank">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = localStorage.getItem("theme") || false;

if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) {document.documentElement.setAttribute("data-theme", theme);

       localStorage.setItem( "theme" , theme );}

    else{document.documentElement.setAttribute("data-theme", "dark");

    localStorage.setItem( "theme" , "dark" );}

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  localStorage.setItem( "theme" , newTheme );

};

    </script>

</body>

</html>

Avec session storage:

<!doctype html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>

Light et dark mode

    </title>

    <style>

:root {--back: #f5f5f5;}

:root[data-theme="dark"] {--back: #2f3947;}

body {opacity: 0; background-color: var(--back); color: red;

transition: background-color 1s, opacity 1s;}

    </style>

</head>

<body>

<h1>Light, dark mode</h1>

<br>

<button id="darkMode">Toggle Dark Mode</button>

<br>

<p>Source: <a href="https://thomas-francois.fr/creer-un-night-mode-avec-les-variables-css-et-javascript-localstorage/" target="_blank">Modes selon ce site ci</a></p>

<p>Mercii !!</p>

    <script type="text/javascript">

document.addEventListener("DOMContentLoaded", () => {

  let theme = sessionStorage.getItem("theme") || false;

if( !theme ) theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : false ;

  if (theme) {document.documentElement.setAttribute("data-theme", theme);

       sessionStorage.setItem( "theme" , theme );}

    else{document.documentElement.setAttribute("data-theme", "dark");

    sessionStorage.setItem( "theme" , "dark" );}

  document.body.style.opacity = 1;

});

document.getElementById('darkMode').onclick = () => {

  var currentTheme = document.documentElement.getAttribute("data-theme");

  var newTheme = currentTheme === "dark" ? "light" : "dark";

  document.documentElement.setAttribute("data-theme", newTheme);

  sessionStorage.setItem( "theme" , newTheme );

};

    </script>

</body>

</html>

1) pour enlevé le darkmode par default supprimer les 2 lignes de l'évent DOMContentLoaded:

  else{document.documentElement.setAttribute("data-theme", "dark");

    localStorage.setItem( "theme" , "dark" );}

2) Il vaux mieux appeler un fichier externe <script src="mode.js"></script>, comme ça tu n'aurras qu'un fichier à modifier, c'est plus simple.

3) Perso, le mieux est d’isoler les différent codes et d'utiliser 2 fichiers .js différent comme ça tu sera ou chercher exactement en cas de modifications.

crap0 · 31-01-2024 14:49:48

Merci
pour tes réponses 2) et 3), oui je me disais bien mais on voit souvent (enfin à ce que j'ai pu voir) les scripts .js intégré au html... je me trompe peut-être.

Pour le localStorage et sessionStorage, comme leur nom l'indique "sessionStorage" serra pour chaque session (de l'ouverture à la fermeture du navigateur) .. localStorage permet de rendre persistant le choix du mode entre deux session du navigateur. Je pense que je préfére sessionStorage, je sais pas pourquoi .. mais ce serra ce code que je choissirai (quitte à le changer).

Yes! merci d'avoir pris le temps !!

Debian-facile

#1 25-01-2024 03:16:00

Html, Css et Javascript : toggle dark mode (demande de vérification)

#2 25-01-2024 18:00:44

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#3 30-01-2024 12:17:10

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#4 30-01-2024 19:04:34

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#5 31-01-2024 01:38:06

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#6 31-01-2024 11:32:48

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#7 31-01-2024 12:23:52

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#8 31-01-2024 14:05:57

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

#9 31-01-2024 14:49:48

Re : Html, Css et Javascript : toggle dark mode (demande de vérification)

Pied de page des forums