Permanent Night Mode Toggle

Question

function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}

<!--style.css-->

body{
 background-color:#ffffff;
}

li{
  color:#000000;
}

<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>

<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>

I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.

<!--stylenight.css-->

body{
 background-color:#000000;
}

li{
  color:#ffffff;
}

Does this answer your question? [How to set dark mode for random HTML?](https://stackoverflow.com/questions/56915096/how-to-set-dark-mode-for-random-html) — Vivek Mehta, Jan 15 '20 at 06:44

score 0 · Answer 1 · answered Jun 13 '18 at 06:14

You will have to set cookies in the browser when the user clicks the Day/Night Mode Button. and read the cookie value to set the Mode when user comes back to your original page.

You can read more about setting and reading cookies in javascript here: https://www.w3schools.com/Js/js_cookies.asp

You are looking are something like this on clicking the button:

document.cookie = "mode=Day;";

Also you will need a function to read the cookies when the page loads:

(From How do I call a JavaScript function on page load?)

window.onload = function() {
   readCookieAndSetMode();
};

And on readCookieAndSetMode() you should read the cookie using

var x = document.cookie;

and depending on x swap the CSS (I leave that part to you).

score 0 · Answer 2 · answered Jan 15 '20 at 06:01

All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..

<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
  var cc = document.body.className;
  if (cc.indexOf("darktheme") > -1) {
    document.body.className = cc.replace("darktheme", "");
    if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
    localStorage.setItem("preferredmode", "light");
  } else {
    document.body.className += " darktheme";
    if (opener) {opener.document.body.className += " darktheme";}
    localStorage.setItem("preferredmode", "dark");
  }
}
(
function setThemeMode() {
  var x = localStorage.getItem("preferredmode");
  if (x == "dark") {
    document.body.className += " darktheme";
  }
})();
//]]>
</script>

<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}

<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
    </div>

Permanent Night Mode Toggle

2 Answers2