im a beginner to JavaScript & html,
i made a simple button:
<button id="button6" type="button" class="btns"
onclick="LightTheme()">Light Mode</button>
. this is supposed to change the page’s view to light mode, instead of dark.
the script is:
function LightTheme() {
document.body.style.backgroundColor = "#DBE6FD";
document.getElementById('button_circle').style.color = "white";
document.getElementById('button1').style.color = "#47597E";
document.getElementById('button2').style.color = "#47597E";
document.getElementById('button3').style.color = "#47597E";
document.getElementById('text_p').style.backgroundColor = "#A2DBFA";
document.getElementById('button6').innerHTML = "Dark Mode";
}
now say I want to revert back to old settings, I will need the button to act the opposite, and switch itself back and forth between modes and clicks.
any help is appreciated!
p.s – I know this is pain to read to some of you, but im learning!!
>Solution :
You could make a function to toggle the theme, so if the theme is currently dark, it becomes light, and if it is light, it becomes dark
// keeps track of whether the theme is dark or light
let darkMode = false
function ToggleTheme() {
// if the theme is currently dark, set it to light
if(darkMode) {
// set the colors for the light theme
// update the dark mode variable
darkMode = false
}
// otherwise, set it to dark
else {
document.body.style.backgroundColor = "#DBE6FD";
document.getElementById('button_circle').style.color = "white";
document.getElementById('button1').style.color = "#47597E";
document.getElementById('button2').style.color = "#47597E";
document.getElementById('button3').style.color = "#47597E";
document.getElementById('text_p').style.backgroundColor = "#A2DBFA";
document.getElementById('button6').innerHTML = "Dark Mode";
darkMode = true
}
}
<button id="button6" type="button" class="btns"
onclick="ToggleTheme()">Light Mode</button>