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

15th Aug 2020, 1:06 PM
Raihan
Raihan - avatar
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'); } });
15th Aug 2020, 1:44 PM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
+ 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
15th Aug 2020, 1:48 PM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
15th Aug 2020, 2:02 PM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
+ 1
Han Z Happy to help..!
16th Aug 2020, 5:20 AM
Hanuma Ukkadapu
Hanuma Ukkadapu - avatar
0
Thanks you so much! Hanuma Ukkadapu
16th Aug 2020, 12:29 AM
Raihan
Raihan - avatar