Darkmode Button

Question

i have implemented a button which should change the background color, into blue from black. But i didnt find a easy way, how I can do that. This is my HTML file

<div style="background-color: #161624; width: 100%; height: 20%; "></div  <div style="background-color: #efece7; width: 100%; height: 60% "> </div> <div style="background-color: #161624; width: 100%; height: 20%; vertical-align: bottom ; "</div>



       <button id="changecolor">Change Color</button>

   
</div>

I want that the button changecolor, change the background color, where the height is 20% at both. enter image description here

The blueblack color should change

Does this answer your question? [How do I change the background color with JavaScript?](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — jeremy-denis, Feb 03 '22 at 08:41

Wanz · Answer 1 · 2022-02-03T08:55:25.447

I would recommend using a seperate css file for this with classes of colors and designs depending on dark/light mode.

simply add a css class of example down below and add some javascript to be able to change the class on the button or element you want to use as the switch.

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

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}

<body>

currently this is just pointing to the body but can easily be adjusted to point at any element you would like it to

Just let me know if you have any questions

Darkmode Button

1 Answers1