create switch for changing theme intead of browser

Question

I added a theme in my HTML page by:

<link rel="alternate stylesheet" href="css/dark.css" title="dark">

this creates an option to switch theme from view>style in browser as it is expected to. I want to create a switch in the page itself for changing the theme. <button>Switch Theme</button>will create a button but how do I make it switch theme?

Answer 1

You should trigger a change in the href attribute of the <link> tag on the click of the button, as demonstrated:

HTML

<link rel="stylesheet" href="dark.css" id="theme">
<button id="switch">Switch Theme</button>

JavaScript

document.getElementById('switch').onclick = function() {
  if (document.getElementById('theme').href == "dark.css") {
    document.getElementById('theme').href = "light.css";
  } else {
    document.getElementById('theme').href = "dark.css";
  }
};

Now, the dark.css and light.css would contain different styles for your elements for both the themes respectively. For example:

dark.css

body{
    background: #000;
}

light.css

body{
    background: #fff;
}

Answer 2

this is very simple you need to bind the click to function and call it:

Replacing css file on the fly (and apply the new style to the page)