Help say for this calculator to be changed to dark Mode

Question

Help say for this calculator to be changed to dark Mode use JavaScript

https://code.sololearn.com/W6p9fbpEkQ1U/?ref=app

Answer 1

Han Z
Add a Checkbox to toggle between Dark and Light modes.

You can use CSS Variables to store the colors for Light and Dark modes and change them on Checkbox input.

Ex.

HTML
-------
<input id="darkMode" type="checkbox" >
-------

CSS:
-------
:root{
// setting a variable(scope: global)
--bg-color: #fff;
}
body{
// using the variable
background-color: var(--bg-color);
}
-------

JS:
-------
const root = document.documentElement;
const checkbox = document.getElementById('darkMode');
checkbox.addEventListener('input',()=>{
if(checkbox.checked){
// If checked change to Dark
root.style.setProperty('--bg-color','#000');
}
else{
// If not checked change to Light
root.style.setProperty('--bg-color','#fff');
}
});

Answer 2

Han Z
The eventListener will listen for any input event and executes the function inside.

As soon as the variable's value in CSS changes, its value will be updated wherever you used it , like here for the body element

Answer 3

Han Z

A Code Example I created:
https://code.sololearn.com/Wtd4e1zsfs9n/?ref=app

Answer 4

Han Z
Happy to help..!

Answer 5

Thanks you so much! Hanuma Ukkadapu