How to revert changes to css made by javascript

Question

So I have a button that toggles a simple dark theme for my web app.

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

Once the user clicks it will activate this function in javascript.

function dark_mode() {
    document.body.style.background = "#2C2F33";}

This will only change the background. I am wondering if the user clicks the button a second time it will revert the changes made by the function. (i.e toggle on/off) Thanks for the time and help in advance!

What's the background meant to be normally? #FFFFFF (white)? — Jack Bashford
– Jack Bashford, Commented Mar 2, 2019 at 3:55
You can use data tag in the button to keep current theme and switch accordingly. — Mohammad Arshad Alam
– Mohammad Arshad Alam, Commented Mar 2, 2019 at 3:59

Kirill · Accepted Answer · 2019-03-02 04:04:07Z

4

You can make it by toggling CSS class, it is more flexible solution

function dark_mode() {
  document.body.classList.toggle('dark-mode')
}

.dark-mode {
  background: #2C2F33
 }

<button class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

answered Mar 2, 2019 at 4:04

Kirill

1804 bronze badges

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

Comments

Jack Bashford · Accepted Answer · 2019-03-02 04:01:52Z

3

Just check and change the style using a ternary operator:

function dark_mode() {
    document.body.style.background = document.body.style.background == "#2C2F33" ? "#FFFFFF" : "#2C2F33";
}

answered Mar 2, 2019 at 4:01

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Comments

Mohammad Arshad Alam · Accepted Answer · 2019-03-02 04:23:06Z

3

You can use data tags to track current theme :

<button class="btn btn-primary" onclick="dark_mode(this);" data-dark-theme="on" >Dark Mode ON</button>

JS :

function dark_mode(ctrl) {
var darkTheme = ctrl.getAttribute("data-dark-theme"); 
  if(darkTheme== "on"){
    ctrl.setAttribute("data-dark-theme", "off"); 
    document.body.style.background = "#2C2F33";
    ctrl.innerHTML  = "Dark Mode OFF";
  }
  else {
    ctrl.setAttribute("data-dark-theme", "on"); 
    document.body.style.background = "#FFFFFF";
    ctrl.innerHTML  = "Dark Mode ON";
  }
}

Working demo

edited Mar 2, 2019 at 4:23

answered Mar 2, 2019 at 4:10

Mohammad Arshad Alam

9,8626 gold badges41 silver badges63 bronze badges

1 Comment

theberzi Over a year ago

Use dataset to interact with data-* attributes: set with ctrl.dataset.darkTheme = true, read with ctrl.dataset.darkTheme. (kebab-case is automatically converted to camelCase.)

Thomas Prince · Accepted Answer · 2019-03-02 04:02:05Z

2

If the user clicks again, the function is simply called again. So, after the first click there are no more changes.

A better way would be to assign your dark mode styles to a class, say "btn--dark-mode" and then use js to toggle that class:

function dark_mode() {
document.querySelector('#dark-mode-toggle').classList.toggle('dark-mode'); // ie9+ only
}

.btn--dark-mode {
  background-color: #2C2F33;
}

<button id="dark-mode-toggle" class="btn btn-primary" onclick="dark_mode()">Dark Mode ON</button>

This will apply the class or take it off depending on whether it is already there.

answered Mar 2, 2019 at 4:02

Thomas Prince

3321 silver badge5 bronze badges

1 Comment

Kirill Over a year ago

This will add .dark-mode class to button because you are querying document.querySelector('#dark-mode-toggle')

Collectives™ on Stack Overflow

How to revert changes to css made by javascript

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related