javascript - Let the user choose between dark and light mode (save settings for every page, cookies?) - Stack Overflow

admin2025-04-17 0

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: / 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");
  });
});

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"?

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/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");
  });
});

Share Improve this question edited Jun 21, 2018 at 9:17 Rory McCrossan 338k41 gold badges320 silver badges351 bronze badges asked Jun 21, 2018 at 9:05 lonelydoctors 531 silver badge5 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

Firstly, having multiple repeated event handlers for the same event on the same element is pletely 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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744885580a272514.html

最新回复(0)