How to toggle between two CSS documents with a <button> in HTML

Question

I'm trying to use a dark theme and light theme on my webpage, but I can't find a way to toggle them with just one button (so 1st click of the button turns on the dark theme and 2nd time turns it off). I would prefer to be able to do this without the use of a third-party JavaScript library. I have found a way to do this with an <option> element but that isn't the "toggle button" I want:

  <button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
    <select id="select">
        <option>Dark Theme</option>
        <option>Revert To Original</option>
    </select>

and

function getTheme () {
    function changeTheme (Theme) {
        document.getElementById('style').setAttribute('href', Theme);
    }
    var index = document.getElementById("select").selectedIndex;
    switch (index) {
        case 0:
          changeTheme('css/dark.css');
          break;
          case 1: changeTheme('css/main.css');
    }
}

Thanks for your help!

Possible duplicate of How to make changeable themes using CSS and JavaScript — Rob
– Rob, Commented Apr 11, 2019 at 12:45
@Rob "I have found a way to do this..." - TO is asking for a button to toggle between two states — Andreas
– Andreas, Commented Apr 11, 2019 at 12:52
Use a closure, a global variable, check the value of the href attribute, ... — Andreas
– Andreas, Commented Apr 11, 2019 at 12:55

R3tep · Accepted Answer · 2019-04-12 09:02:33Z

2

Another way is to use a boolean. You can change the value of the boolean on each click. And you can toggle the css with this boolean.

<button onclick=getTheme()>Click to use this theme.</button>

Js

var bool = true;
function getTheme() { 
  function changeTheme (theme) {
    document.getElementById('style').setAttribute('href', theme);
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  changeTheme(theme);
}

Edit based on comment

This does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"

You can use the same logic, like:

var bool = true;
function getTheme() { 
  function changeTheme (theme, text) {
    document.getElementById('style').setAttribute('href', theme);
    document.getElementById('themeToggle').innerText = text;
  }  

  bool = !bool;
  var theme = bool ? 'css/dark.css' : 'css/main.css';
  var text  = bool ? 'Dark theme' : 'Light theme';
  changeTheme(theme, text);
}

edited Apr 12, 2019 at 9:02

answered Apr 11, 2019 at 12:53

R3tep

12.9k10 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wyatt Nulton Over a year ago

this does work perfectly, however, is there a way to use document.getElementById("themeToggle").innerHTML = "New text!"; with this to change the button between "dark theme" or "light theme"

Md. Abu Sayed Over a year ago

Wow nice answer

Komal R · Accepted Answer · 2019-04-11 12:50:35Z

2

I know this seems a bit amateur but you can do something like this,

<button onclick=getTheme() id=themeToggle>Click to use this theme.</button>
<script>
var click = 0;
function getTheme()
{   
    click++;
    if(click%2 == 0)
        changeTheme('css/dark.css');
    else
        changeTheme('css/main.css');
}
</script>

and change text on button accordingly. Let me know if it works.

answered Apr 11, 2019 at 12:50

Komal R

4254 silver badges17 bronze badges

Comments

Michael Almeida · Accepted Answer · 2019-04-15 20:17:51Z

0

A simple way is:

HTML

<input type="button" value="Dark" id="button" onclick=getTheme()></input>

JavaScript

function getTheme () {
  var button = document.getElementById("button");
    if(button.value === "Dark") {
      button.value = "Revert To Original";
    } else {
      button.value = "Dark";
    }
}

Inside the if/else you can put your change theme function.

https://codepen.io/anon/pen/xedzVz?editors=1111

edited Apr 15, 2019 at 20:17

answered Apr 11, 2019 at 13:06

Michael Almeida

1323 bronze badges

Collectives™ on Stack Overflow

How to toggle between two CSS documents with a <button> in HTML

3 Answers 3

Edit based on comment

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit based on comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related