CODEWITHSUNDEEP
javascripthtmlcss
paralaxbison
paralaxbison

Reputation: 199

Toggling booleans with javascript for a dark mode feature

I am trying to set up a dark mode. This logic doesn't quite work.

I have re-arranged the variables multiple times. I can't quite figure it out. 

var isDarkMode = false;
var darkModeToggle = false;


function toggleDarkMode(){
  if (isDarkMode === false && darkModeToggle === false){
    isDarkMode = true;
    setDarkMode();

  }

  if (isDarkMode === true && darkModeToggle === true){
    isDarkMode = false; 
    setDarkMode();

    darkModeToggle = false;

  }

  darkModeToggle = true;


}

function setDarkMode(){
    if (isDarkMode === true){
  //Change to dark
  }


  if (isDarkMode === false){
//Change to light
  }


}

I have the rest of the functionality done. I think I am missing some easy, I just don't know what it is.

Upvotes: 0

Views: 424

Answers (3)

zer00ne
zer00ne

Reputation: 43880

  • As an example we'll say dark mode involves the <main> element having the class .dark.
  • Declare let mode = false outside your toggle function.

  • Place this ternary control statement in your toggle function:

    /* pseudo-code:*/ mode = condition........... if.true...else..false
/* real code..:*/ mode = main.matches('.dark') ? true    :    false;

    "If main has class .dark then mode is true else its false"

Click anywhere in demo to toggle dark mode. 

let mode = false;
const main = document.querySelector('main');
main.onclick = toggleMode;

function toggleMode(e) {
  if (e.target.matches('main')) {
    e.target.classList.toggle('dark');
    mode = main.matches('.dark') ? true : false;
    console.log(mode);
  }
  return false;
}
* {
  margin: 0;
  padding: 0;
}

:root {
  font: 700 small-caps 3vw/1.2 Taholma;
}

main {
  height: 100vh;
  width: 100vw;
  background: #dad;
}

h1 {
  text-align: center;
  pointer-events: none;
}

.dark {
  color: #fc0;
  background: #000;
}

h1::before {
  content: 'Default ';
}

.dark h1::before {
  content: 'Dark ';
}
<main>
  <h1>Mode</h1>
</main>

Upvotes: 1

Randy Casburn
Randy Casburn

Reputation: 14165

You've overcomplicated things a bit. I don't know the reason for the darkModeToggle variable so I've excluded it from my solution.

toggleDarkMode() is as easy as

isDarkMode = !isDarkMode; setDarkMode();

  • there is no reason to test value in that function as you'll see below.

var isDarkMode = false;

function toggleDarkMode() {
  isDarkMode = !isDarkMode;
  setDarkMode();
}

function setDarkMode() {
  if (isDarkMode) {
    console.log("Change to dark");
  } else {
    console.log("Change to light");
  }
}

toggleDarkMode();
toggleDarkMode();
toggleDarkMode();
toggleDarkMode();

Upvotes: 1

Shubham Agrawal
Shubham Agrawal

Reputation: 182

You don't need two variables. Just keep a single variable to track current mode. Have a look at following working example:

var isDarkMode = false;

function toggleDarkMode(){
    var $el = document.getElementById("test");
    if (!isDarkMode){
      //Change to dark
      $el.style.background = "black";
      $el.style.color = "white";
    } else {
      //Change to light
      $el.style.background = "white";
      $el.style.color = "black";
    }
    isDarkMode = !isDarkMode;    
}
#test {
  background: white;
  color: black;
}
<p id ="test"> Test Paragraph </p>
<button onclick = "toggleDarkMode()"> Toggle Dark Mode </button>

Upvotes: 1

Related Questions