How to enable Dark Mode in all pages?

Question

So I have a JS script and when a user presses the button that says Dark Mode the page switches to dark_theme.css (instead of using theme.css which is the Ligh Mode css) and when the user presses Light Mode button it switches back to theme.css. So my problem is that when a user uses darm_theme.css and loads a different page or refreshes the current page the theme switches back to light mode. How can I somehow save the user's selection/choice?

function swapStyleSheet(sheet){
    document.getElementById('theme').setAttribute('href', sheet);
}

I have one file called theme.css and one more called dark_theme.css

<link id="theme" rel="stylesheet" type="text/css" href="theme.css">
...more html here...
<p><button class="colormode" onclick="swapStyleSheet('dark_theme.css')">Dark Mode</button> <button class="colormode" onclick="swapStyleSheet('theme.css')">Light Mode</button></p>

score 5 · Accepted Answer · answered Oct 21 '17 at 21:28

5

Use localStorage for that:

function swapStyleSheet(sheet){
  document.getElementById('theme').setAttribute('href', sheet);
  localStorage.setItem("sheet", sheet);
}

window.onload = _ =>
 swapStyleSheet(
  localStorage.getItem("sheet") || "default.css"
 );

answered Oct 21 '17 at 21:28

Jonas Wilms

132,000
20
149
151

Well this does work but only on the index.html and about.html pages which are on the same folder as the js and the 2 CSS files. It doesnt work on the other pages which are in subfolders. – Apost Oct 21 '17 at 21:38
@apost well you need absolute urls then. Thats not a problem of the code – Jonas Wilms Oct 21 '17 at 21:41
How can I use absolute URLs? – Apost Oct 21 '17 at 21:46

score 1 · Answer 2 · answered Oct 21 '17 at 21:42

You can use cookies. (Cookie functions here: https://stackoverflow.com/a/24103596)

function swapStyleSheet(sheet){
    document.getElementById('theme').setAttribute('href', sheet);
    createCookie ("sheet", sheet);
}
document.addEventListener("DOMContentLoaded", function(event) { 
    var item = readCookie ("sheet") || "default.css";
    swapStyleSheet (item);
});

How to enable Dark Mode in all pages?

2 Answers2