javascript - Dark-Mode preferences lost when webpage is restarted

Question

I am trying to implement dark mode on my to-do list website, the button and dark mode preferences work perfectly, yet when the post request is made using nodeJS, the webpage restarts and it is back to normal (i.e. the same mode the webpage is loaded with).

Thanks in advance :)

gitHub for the complete code: https://github.com/ahujaharshit15/to-do

The code is as follows:

$(".input-text").focus();

$("#active-button").on("click", function() {
  $(this).children().toggleClass("button-color");
  $(".checkbox:checked").parent(".hideBox").toggleClass("hide");
})

$("#completed-button").on("click", function() {
  $(this).children().toggleClass("button-color");
  $(".checkbox:not(:checked)").parent(".hideBox").toggleClass("hide");
})

$("#all-button").on("click", function() {
  window.location.reload();
})

$(".mode-button").on("click", function() {
  $("body").toggleClass("dark-mode-1");
  $(".entry-div, .box, .final-div").toggleClass("dark-mode-2");
  $("p, .input-text").toggleClass("dark-mode-3");
})

.dark-mode-1{
  background-color: hsl(0, 0%, 98%);
  margin: 0;
  background-image: url("/images/bg-desktop-light.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}

.dark-mode-2{
  background: hsl(0, 0%, 98%);
}

.dark-mode-3{
  color: hsl(235, 19%, 35%);
}

<%- include("header") -%>

<div class="bg-div">

</div>

<div class="header-div">
  <div class="name-div">
    <h1 class="header-text">TODO</h1>
  </div>
  <div class="dark-mode-div">
    <button class="inherit-bg" type="button" name="button">
      <p> <img class="mode-button" src="images/dark-mode.png" alt=""> </p>
    </button>
  </div>

</div>

<div class="entry-div">

  <div class="item">
    <form action="/add" method="post">

      <button class="add-button" type="submit" name="button"></button>
      <input class="input-text" type="text" name="newValue" placeholder="Create a new todo..." autocomplete="off" required>
    </form>
  </div>

</div>


<div class="box">

  <% if(list == ""){ %>
  <div class="item hideBox">
    <p class="ml2">Add a To-Do Here</p>
  </div>
  <% } %>

  <% for(var i = 0; i < list.length; i++){ %>
  <div class="item hideBox">



    <input class="checkbox" type="checkbox">
    <p><%= list[i] %></p>
    <div class="remove-div">
      <form class="" action="/remove" method="post">
        <button class="inherit-bg remove-button" onclick="splice()" type="submit" value=<%=list.indexOf(list[i]) %> name="itemNumber">X</button>
      </form>
    </div>
  </div>

  <% } %>

</div>



<div class="final-div">
  <div class="item">
    <p class="items-left"><%= itemsLeft %> Items</p>

    <div class="buttons inherit-bg">
      <button class="inherit-bg" type="submit" id="all-button" value="true">
        <p class="button-size button-color">All</p>
      </button>
      <button class="inherit-bg" type="submit" id="active-button" value="true">
        <p class="button-size">Active</p>
      </button>
      <button class="inherit-bg" type="submit" id="completed-button" value=true>
        <p class="button-size">Completed</p>
      </button>
    </div>

    <form class="" action="/clear" method="post">
      <button class="inherit-bg" type="submit" name="button">
        <p class="clear"> Clear </p>
      </button>
    </form>

  </div>
</div>


<%- include("footer") -%>

Answer 1

You will need to save that state somewhere. In this function:

$(".mode-button").on("click", function() {
  $("body").toggleClass("dark-mode-1");
  $(".entry-div, .box, .final-div").toggleClass("dark-mode-2");
  $("p, .input-text").toggleClass("dark-mode-3");
})

You can save the dark mode status into localStorage, by first checking whether it's been toggled on or off, then doing something like localStorage.setItem('my-app-dark-mode', "true") (or false), and then on app load, retrieving that value with JSON.parse(localStorage.getItem('my-app-dark-mode') to figure out which mode you should be using.