CODEWITHSUNDEEP
javascriptjquerycookiescolors
lonelydoctors
lonelydoctors

Reputation: 53

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 two buttons on the homepage with which the user can the website mode to either dark or light. These settings should then be remembered as the user enters the website and clicks on the different links.

So far I have added the function that changes the background color and color of the font onClick but I can only do that on the current page.

I assume I have to use cookies in some form..?

Here is my fiddle: http://jsfiddle.net/sqn47kmt/10/ and heres my code 

$(document).ready(function($) {
  $(".darkmode").click(function() { // darkmode for basic body, adds css styles on click
    $("html").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for headline body, adds css styles on click
    $("h3").addClass("darkclass");
  });

  $(".darkmode").click(function() { // darkmode for links, adds css styles on click
    $("a").addClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for basic body, removes css styles on click
    $("html").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for headlines, removes css styles on click
    $("h3").removeClass("darkclass");
  });

  $(".normalmode").click(function() { // normalmode for links, removes css styles on click
    $("a").removeClass("darkclass");
  });
});

Upvotes: 3

Views: 4032

Answers (2)

Durga Prasad
Durga Prasad

Reputation: 43

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.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337570

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

Upvotes: 6

Related Questions