javascript function that reverts back on 2nd button click?

rolandx2022 0
Viewed 27

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!!

onclick button javascript css html
2 Answers

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>
jjroley0

Currently, if you are not familiar with CSS. This is another approach.

Store state in constant

const LIGHT_MODE = {
    backgroundColor: "#DBE6FD",
    button_circleColor: "white",
    button1Color: "#47597E",
    button2Color: "#47597E",
    button3Color: "#47597E",
    text_pBackgroundColor: "#A2DBFA",
}

const DARK_MODE = {
    backgroundColor: "...",
    button_circleColor: "...",
    button1Color: "...",
    button2Color: "...",
    button3Color: "...",
    text_pBackgroundColor: "...",
}

function LightTheme() {
    const button6 = document.getElementById('button6');
    let theme = undefined;
    if (button6.innerHTML === "Dark Mode") {
        button6.innerHTML = "Light Mode";
        theme = LIGHT_MODE;
    } else {
        button6.innerHTML = "Dark Mode";
        theme = DARK_MODE;
    }
    document.body.style.backgroundColor = theme.backgroundColor;
    document.getElementById('button_circle').style.color = theme.button_circleColor;
    document.getElementById('button1').style.color = theme.button1Color;
    document.getElementById('button2').style.color = theme.button2Color;
    document.getElementById('button3').style.color = theme.button3Color;
    document.getElementById('text_p').style.backgroundColor = theme.text_pBackgroundColor;
}

Also, with CSS this could be achieved much easier.

HuyPham0
Related