create switch for changing theme intead of browser page style html

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?

2 answers

  • answered 2018-01-13 15:21 Vitaly Menchikovsky

    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)

  • answered 2018-01-13 15:24 Mrigank Pawagi

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


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


    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:


        background: #000;


        background: #fff;