0
Help say for this calculator to be changed to dark Mode
Help say for this calculator to be changed to dark Mode use JavaScript https://code.sololearn.com/W6p9fbpEkQ1U/?ref=app
5 Respuestas
+ 2
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');
}
});
+ 1
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
+ 1
Han Z
A Code Example I created:
https://code.sololearn.com/Wtd4e1zsfs9n/?ref=app
+ 1
Han Z
Happy to help..!
0
Thanks you so much! Hanuma Ukkadapu