CODEWITHSUNDEEP
javascript
coding corgi
coding corgi

Reputation: 1

By changing the dark mode toggle, I also want to change the bootstrap class

enter image description here

In bootstrap, I want to make a 'darkmode' toggle using the light/dark mode button.

<button type="button" class="btn btn-dark">Dark Mode</button>

press this button

class="btn btn-dark"  -->  class="btn btn-light"

As the class changes

function darkMode() {
    var body = document.body;
    body.classList.toggle("dark-mode");

    var button = document.getElementById("button");
    if (button.innerHTML == "Dark Mode") {
        button.innerHTML = "Light Mode"
    } else {
        button.innerHTML = "Dark Mode";
        button.innerText
    }
}

I've made it up to here.

I want to change the class in bootstrap, how do I do that?

Upvotes: 0

Views: 303

Answers (2)

Michael M.
Michael M.

Reputation: 11080

You can use .className like you did before. For example:

function darkMode(){
    var body = document.body;
    body.classList.toggle("dark-mode");

    var button = document.getElementById("button");
    if(button.innerHTML == "Dark Mode"){
        button.innerHTML = "Light Mode";
        button.className = "btn btn-light";
    } else {
        button.innerHTML = "Dark Mode";
        button.className = "btn btn-dark";
    }
}

Upvotes: 1

dizad87
dizad87

Reputation: 488

If .toggle() is not working, can also use .addClass() and .removeClass(). Keep a boolean of the toggle value, remove the existing class, and add the class that corresponds to the boolean.

Upvotes: 0

Related Questions