How to create checkbox to change both the CSS and Javascript of a document? Background color toggle

Question

I am trying to create a dark mode toggle button with a checkbox (I will eventually change to a toggle in CSS). So far, I was able to change the elements in my Javascript canvas to be in "dark mode" and changed their color easily but is there a way I can use this same switch/checkbox in the Javascript to also toggle the CSS portion? I do not want to create another checkbox to change the background color of the HTML. I tried the method below with no result. I want the checkbox to basically turn the background of the webpage black and go back to white if unchecked. My full code is on CodePen https://codepen.io/Fragile404/pen/VxZVxm

body {
background-color: white;
}
body.checkbox: checked; 
{
background-color: black;
}

tao · Accepted Answer · 2018-04-17 20:00:14Z

0

You'll need to use JavaScript for this. Change your final if to:

if(darkMode.checked) {
  toggleColor = (0,0,0);
  document.body.style.backgroundColor=  'black';
} else {
  toggleColor = (255,255,255);
  document.body.style.backgroundColor = 'white';
}

Why? CSS only parses forwards and downwards. Which means you can use a parent condition in order to style a child and you can use a condition on a previous sibling to style up a later one, but not the other way around.

There were many discussions around the subject and attempts to change the status-quo but, in reality, if CSS would also parse backwards, web would be ten fold slower, at least.

answered Apr 17, 2018 at 20:00

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

8 Comments

Anthony Over a year ago

You could also set a class on the body element and have a css class change the background-color when that class is present.

tao Over a year ago

@Anthony, you are correct. You could complicate it enough to justify any budget. You can build an API service for it, with SSH, which would also justify a backend interface to manage it all, I would personally also install Swagger and I'd host it on AWS Cloud Service. But, somewhere, towards the end, you'd need to modify the style.backgroundColor property of document.body element, one way or another: using a CSS rule in a stylesheet, style attribute or style tag, or using vanilla js (as I did) or jQuery, or Angular. To get the job done, I mean.

Anthony Over a year ago

No need to get snarky. To be clear, you are right. I was just adding additional info. If you do it with classes you can avoid magic strings in javascript. If you don't want to do it in a stylesheet that's fine.

tao Over a year ago

Joke aside, in this case it would not make sense to add a class to body in this case, IMHO. You'd be writing more code and it would be more difficult to maintain that what I proposed. The only reason why you'd want to use classes (or other CSS selectors) would be not to harm some delicate CSS selector intricacy (using classes - and CSS - also altering the backgroundColor of body), by using style attribute hammer. But, since we don't have that, my solution is straight forward and taps into what has already been developed, using the "preferred" tech. Hence, job done with minimal effort.

Anthony Over a year ago

You're right, in this case it's not necessary. I was assuming more complexity would be added, which is not present in the question. I still thought it might be a helpful note. So yeah, don't add a stylesheet to style one element.

|

Collectives™ on Stack Overflow

How to create checkbox to change both the CSS and Javascript of a document? Background color toggle

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related