Storing dark mode preference for my website

Question

I have created dark mode for my website but when I turn dark mode on then refresh the page or navigate away the preference resets. I need a way of storing the preference as a cookie. Here is the code I have added to jquery. I also defined the dark mode colours in my css files.

    $( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
  $( "body" ).removeClass( "dark" );
  $( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
  $( ".inner-switch" ).text( "OFF" );
  } else {
  $( "body" ).addClass( "dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
  $( ".inner-switch" ).text( "ON" );
  }
});

What other research have you done on storing information in cookies? Have you checked about using [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)? — BDD, Oct 22 '19 at 22:33
Possible duplicate of https://stackoverflow.com/questions/58358637/using-the-css-of-previous-page-and-apply-to-current-page/58358815#58358815 — Anis R., Oct 22 '19 at 22:39

score 1 · Answer 1 · answered Oct 22 '19 at 22:15

First you need to store your state in for example localstorage:

$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
localStorage.removeItem("dark");
$( "body" ).removeClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
$( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
$( ".inner-switch" ).text( "OFF" );
} else {
 localStorage.setItem("dark");
 $( "body" ).addClass( "dark" );
 $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
 $( ".inner-switch" ).text( "ON" );
 }
});

Then you check onload if localstorage is set:

<body onload="myFunction()">

myFunction(){
   if(localStorage.getItem("dark")){
      $( "body" ).addClass( "dark" );
      $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
      $( ".inner-switch" ).text( "ON" );
}

Thanks for your reply. The dark mode switch no longer works when I apply as you have explained. — , Oct 22 '19 at 23:02
Doesn’t give me an error. Just the dark mode switch does nothing. — , Oct 22 '19 at 23:08

score 0 · Answer 2 · answered Oct 22 '19 at 22:43

What you need is saving user preferences on the browser, and the simplest way of doing so is using localStorage.

Using localStorage, you can have a variable, say darkMode, that you can store in the browser, and it will stay there even after the browser is closed and re-opened.

So, once a user opens your website, you can either:

Read the previously-saved value of darkMode, if the user is a returning user, or
Set your variable darkMode to a default value, say "OFF".

.

onload = function() {
    if(localStorage.getItem("darkMode")) {
        var mode = localStorage.getItem("darkMode");
        //apply relevant CSS changes based on the value of 'mode'
    }
}

Then, in your switch event handler, you can flip the value of the variable like so:

$( ".inner-switch" ).on("click", function() {
    var mode = localStorage.getItem("darkMode");
    localStorage.setItem("darkMode", (mode == 'ON'? 'OFF': 'ON'));
    //relevant CSS changes
}

Thanks for your reply. Please could you clarify the comments " //relevant CSS changes" and "//apply relevant CSS changes based on the value of 'mode'". — , Oct 22 '19 at 23:14
@Ajisto I just meant to apply the code that you already have (adding/removing classes). I didn't include them in the answer just to make it more readable. — Anis R., Oct 23 '19 at 06:50
Regarding aplying changes based on the value of `mode`, what I meant is to check: if `mode` is `"ON"`, add the classes relevant to dark mode, else, light mode. — Anis R., Oct 23 '19 at 06:52

Storing dark mode preference for my website

2 Answers2