1

I have started creating a personal website with a toggle switch and I am looking for a way to keep it activated even when I navigate to an other page in my website.

here is the JavaScript I used:

 btn.addEventListener('click', function () {
    document.body.classList.toggle('dark-theme');
})

Any help is much appreciated, thanks!

Frederic Trivett
  • 11
  • 1
  • Does this answer your question? [Storing Objects in HTML5 localStorage](https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) – jsejcksn Dec 09 '21 at 18:07
  • you can use localStorage. something like secureLs or similar things. – Mah Es Dec 09 '21 at 21:10
  • You can use several ways: localStorage as mentionned before by another user, cookies as shown below, or - a third-option - would be to put the value into the URL of your pages. For returning users, the best option would be to use the cookie. LocalStorage isn't always well supported, so you could also implement a fallback: if localStorage doesn't work, use cookies, etc. Be aware that some users also refuse cookies. – DescampsAu Dec 09 '21 at 22:29

1 Answers1

0

As it seems you want to use a dark and light theme on your website I can give you an example of how I solved this problem:

Javascript:

function changeTheme(){ //function to change Theme on button click
                        //function switches css class
    if(document.body.classList.contains('light')){
        document.body.classList.remove('light');
        document.body.classList.add('dark');
        document.cookie = "Color=dark;"
    }else{
        document.body.classList.remove('dark');
        document.body.classList.add('light');
        document.cookie = "Color=light;"
    }
}

$(document).ready(function() { //calls function every time your webpage loads and checks which theme is selected
    if(getCookie("Color")!= ""){
            if(getCookie("Color")=="dark"){
                changeTheme();
            }
        }
    
    });
function getCookie(cname) { //Helper function to check what theme is currently selected
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

CSS (here are the classes to change the css variables from light to dark and vice versa:

.light{
    --footer-background: rgb(189, 189, 189);
    --footer-textcolor: rgb(14, 14, 14);

    --body-backgroundcolor:rgb(255, 255, 255);

    --body-font-color: rgb(27, 27, 27);

    --scrollbar-track: rgb(192, 192, 192);
    --scrollbar-thumb: rgb(114, 114, 114);
}

.dark{
    --footer-background: rgb(59, 55, 55);
    --footer-textcolor: rgb(238, 238, 238);

    --body-backgroundcolor:rgb(17, 17, 17);

    --body-font-color: rgb(194, 194, 194);

    --scrollbar-track: rgb(39, 39, 39);
    --scrollbar-thumb: rgb(20, 20, 20);
}

Hope I could help

Paul595
  • 21
  • 5