Let The User Choose Between Dark And Light Mode (save Settings For Every Page, Cookies?)

I have just recently started using javascript and jQuery so I'm not an expert and at the moment I am struggling with what I guess could be called a 'basic task'? I want to include

Solution 1:

Firstly, having multiple repeated event handlers for the same event on the same element is completely redundant. You can place all the logic in a single handler. That said, it's not a great idea to individually add the classes to those elements in JS as it ties the UI and JS too closely.

A better idea would be to change your JS logic so that it only sets the class on the body. Then you can simply amend the CSS for all relevant elements based on that body class. That way you only ever need to amend the CSS to change the UI for the 'dark mode'.

To save the state you can use a cookie or localStorage and then read from that when the page loads. The example below uses localStorage, but the pattern for cookies is identical.

$(document).ready(function($) {
  var mode = localStorage.getItem('mode');
  if (mode) 
    $('body').addClass(mode);

  $(".darkmode").click(function() {
    $("body").addClass("darkclass");
    localStorage.setItem('mode', 'darkclass');
  });

  $(".normalmode").click(function() {
    $("body").removeClass("darkclass");
    localStorage.setItem('mode', null);
  });
});

body.darkclass h3,
body.darkclass a {
  background-color: black;
  color: white;
}

Working example

Solution 2:

You can use window.localStorage to set cookies.

$(document).ready(function () {
    //check the button which is clicked
     var darkClick = localStorage.getItem('darkBtnClicked'),
         normalClick =
         localStorage.getItem('normalBtnClicked');

     if (darkClick == "true") {
         console.log('clicked on dark');
         $("html, h3, a, body").addClass("darkclass");
     }
     if (normalClick == "true") {
         console.log('clicked on normal');
         $("html, h3, a, body").removeClass("darkclass");
     }


     //on click of the button add the class we need a nd set the cookies
     $(".darkmode").click(function () {
         //Adding class to all the elements you need in just one line.
         $("html, h3, a, body").addClass("darkclass");
         //setting cookies for the button click
         localStorage.setItem('darkBtnClicked', true);
         localStorage.setItem('normalBtnClicked', false);
     });

     $(".normalmode").click(function () {
         $("html, h3, a, body").removeClass("darkclass");
           //setting cookies for the button click
         localStorage.setItem('normalBtnClicked', true);
         localStorage.setItem('darkBtnClicked', false);
     });
 });

Add the button following scripts at the end of the body for jQuery and For cookies.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

This should work even if you reload your page and redirect your page through the website.