Theme switcher in JS

user_12602171 0
Viewed 712

I want to save the user preferred theme (light/dark) in cookies. Can someone help me with it? I'm really bad at JS. I submit my current script.

Stylesheets:

<link rel="stylesheet" href="custom.css" id="pagestyle2" type="text/css" charset="utf-8"/>
<link href="file-upload.css" id="pagestyle4" rel="stylesheet">
<link href="bootstrap.css" id="pagestyle3" rel="stylesheet">
<link href="hg.css" id="pagestyle" rel="stylesheet">

Switcher:

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="swapStyleSheet('dark.css');swapStyleSheet2('custom-dark.css');swapStyleSheet3('bootstrap-dark.css');swapStyleSheet4('file-upload-dark.css')"></a>
</li>

Switcher JS:

    function swapStyleSheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href', sheet);
    }
    function swapStyleSheet2(sheet) {
        document.getElementById('pagestyle2').setAttribute('href', sheet);
    }
    function swapStyleSheet3(sheet) {
        document.getElementById('pagestyle3').setAttribute('href', sheet);
    }
    function swapStyleSheet4(sheet) {
        document.getElementById('pagestyle4').setAttribute('href', sheet);
    }
css html jquery javascript
2 Answers

I would suggest you have a single function that get called when the button is clicked, specially that the stylesheet names are hard coded anyways

<li class="nav-item" id="pagestylechoose">
    <a href="#" onclick="changeStyleToDark()"></a>
</li>

..

function changeStyleToDark() {
  document.cookie += "style=dark";
  swapStyleSheet('dark.css');
  swapStyleSheet2('custom-dark.css');
  swapStyleSheet3('bootstrap-dark.css');
  swapStyleSheet4('file-upload-dark.css');
}

function swapStyleSheet(sheet) {
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
function swapStyleSheet2(sheet) {
    document.getElementById('pagestyle2').setAttribute('href', sheet);
}
function swapStyleSheet3(sheet) {
    document.getElementById('pagestyle3').setAttribute('href', sheet);
}
function swapStyleSheet4(sheet) {
    document.getElementById('pagestyle4').setAttribute('href', sheet);
}

Now to get the read the user style later you can use

function getUserStyle() {
  return getCookieByName("style");
}

function getCookieByName(cookieName) {
  var cookieString = RegExp(cookieName + "=[^;]+").exec(document.cookie);
  return decodeURIComponent(!!cookiestring ? cookiestring.toString().replace(/^[^=]+./,"") : "");
}

Now, on the beginning of the script, and whenever the page loads, check for the cookie and call changeStyleToDark if it's set to dark.

window.onload = (event) => {
  if (getUserStyle() === "dark") changeStyleToDark();
};
user_74064600

Although it requires a little modification of your CSS, there is another solution instead of having to load different style sheets.

Load a default version, for this example, lets say its the light version. Then when the visitor wants the dark version, a class is added to the BODY called dark.

Then within your DARK version of the CSS, just add body.dark to the beginning of all CSS selectors.

Fiddle: https://jsfiddle.net/Lw7461ey/ (SO Snippets blocks localstorage so I used jsfiddle)

This way you can load all of the CSS files at once, you can even compress them if you wanted to.

var ChangeTheme = document.querySelector(".ChangeTheme");

if(localStorage.getItem("theme") === undefined){
   localStorage.setItem("theme","light");
}

function setTheme(){
   document.body.classList.remove("dark");
   document.body.classList.remove("light");
   document.body.classList.add(localStorage.getItem("theme"));
}

ChangeTheme.addEventListener("click",function(){
   localStorage.setItem("theme",(localStorage.getItem("theme") === "dark") ? "light" : "dark");
   setTheme();
});

setTheme();

For your CSS for example

Lets say in light you have:

a{color:#000000;}

For dark, just change it to:

body.dark a{color:#ffffff;}
user_36842650
Related