'Darkmode Button

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

htmlcssbuttondarkmode


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions