Je développe un site sur lequel vous pouvez définir un "mode sombre" mais lorsque j'y accède ou que je le rafraîchis, il le remet toujours en version claire. Est-ce que leur choix peut être défini / enregistré sur un appareil.
<button onclick="document.body.style.backgroundColor = '#2e2e2e'">Dark Mode</button> <button onclick="document.body.style.backgroundColor = 'white'">Light Mode</button>
C'est tout ce que j'ai pour le moment, jusqu'à ce que je sache comment enregistrer ce choix.
p>
3 Réponses :
J'ai trouvé celui-ci sur Vanilla JS. Vous pouvez enregistrer votre session.
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
function darker() {
if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') {
sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
sessionStorage.setItem('cc', '#777');
}
else if (sessionStorage.getItem('bg') == null || undefined) {
sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
sessionStorage.setItem('cc', '#777');
}
else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {
sessionStorage.setItem('bg', 'rgb(255, 255, 255)');
sessionStorage.setItem('cc', '#333');
}
document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
}
Utilisez le cookie JavaScript
Tout le code ici
Remarque: J'utilise un cookie dont le nom est: bodyColor;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing Page</title>
</head>
<body onload="setbodycolor()">
<p>Testing Page</p>
<button onclick="setbodyBGDarkColor();setCookieDark()">Dark Mode</button>
<button onclick="setbodyBGWhileColor();setCookieWhite()">Light Mode</button>
<script>
function setbodyBGDarkColor(){
document.body.style.backgroundColor = '#2e2e2e'
}
function setbodyBGWhileColor(){
document.body.style.backgroundColor = 'white'
}
function setCookieDark(){
document.cookie="bodyColor=#2e2e2e;expires=Wed, 18 Dec 2023 12:00:00 GMT"
}
function setCookieWhite(){
document.cookie="bodyColor=#ffffff;expires=Wed, 18 Dec 2023 12:00:00 GMT"
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setbodycolor(){
var bodyc=getCookie("bodyColor");
document.body.style.backgroundColor = ""+bodyc;
}
</script>
</body>
</html>
Je pense que c'est la meilleure solution pour vous.
Il y a plusieurs façons de faire cela - une façon serait d'utiliser le LocalStorage pour y parvenir comme indiqué ci-dessous:
<button id="dark">Dark Mode</button> <button id="light">Light Mode</button>
/*
Local helper applies color to document background and saves that color for
recall on future page loads
*/
function applyTheme(color) {
localStorage.set("themeColor", color);
document.body.style.backgroundColor = themeColor;
}
/*
Setup event hander that is called when DOM is ready
*/
window.addEventListener('DOMContentLoaded', () => {
/*
When DOM ready, load previous theme color and apply it (or default to
white if no color previously saved)
*/
applyTheme(localStorage.get("themeColor") || "white");
/*
Bind click event to buttons and invoke apply theme helper function
*/
document.getElementById("dark").addEventListener("click", () => applyTheme("#2e2e2e"));
document.getElementById("light").addEventListener("click", () => applyTheme("white"));
});