1

my page not load darkmode when it refresh

const dayNight = document.querySelector(".day-night");
dayNight.addEventListener("click", () => {
    dayNight.querySelector("i").classList.toggle("fa-sun");
    dayNight.querySelector("i").classList.toggle("fa-moon");
    document.body.classList.toggle("dark");
});
window.addEventListener("load", () => {
    if (document.body.classList.contains("dark")) {
        dayNight.querySelector("i").classList.add("fa-sun");
    } else {
        dayNight.querySelector("i").classList.add("fa-moon");
    }
})
Shri Hari L
  • 4,551
  • 2
  • 6
  • 18
Restu Windri P
  • 21
  • 1
  • Have you considered using [`prefers-color-scheme`](https://github.com/MintPlayer/MintPlayer/blob/master/MintPlayer.Web/ClientApp/src/styles/variables.scss#L66)? – Pieterjan Jun 29 '23 at 04:20
  • Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) – Andy Ray Jun 29 '23 at 04:21

1 Answers1

2

You can use LocalStorage to persist the data.

const dayNight = document.querySelector(".day-night");
dayNight.addEventListener("click", () => {
    dayNight.querySelector("i").classList.toggle("fa-sun");
    dayNight.querySelector("i").classList.toggle("fa-moon");
    const isDark = document.body.classList.toggle("dark");
    // Persist this locally
    localStorage.setItem("dark", isDark);
});
window.addEventListener("load", () => {
    const isDark = localStorage.getItem("dark");
    if (isDark === "true") {
        document.body.classList.add("dark");
        dayNight.querySelector("i").classList.add("fa-moon");
    } else {
        document.body.classList.remove("dark");
        dayNight.querySelector("i").classList.add("fa-sun");
    }
})

You can also checkout @media prefers-color-scheme css media feature to detect it with respect to user's system preferences.

Shri Hari L
  • 4,551
  • 2
  • 6
  • 18