Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

javascript function that reverts back on 2nd button click?

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!

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading