Using Vanilla Javascript to implement a dark mode toggle button

Question

Using Vanilla Javascript to implement a dark mode toggle button

I've been struggling with getting a button to properly switch a website to dark mode. I already have a night mode that works based on the user's location and time, so I know the issue lies within my JavaScript...

Initially, I tried adding 'lightMode' first and then removing 'darkMode', but that didn't solve the problem...

      <button
              type="button"
              class="btn btn-outline-secondary"
              id="buttonChangeMode"
            >
              <i class="far fa-moon"></i>
            </button>

.lightMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: white;
}
.darkMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: rgb(7, 8, 14);
}

function changeMode() {
  let mode = document.getElementById("body");
  if (mode.classList.contains("lightMode")) {
    mode.classList.add("darkMode").remove("lightMode");
  } else if (mode.classList.contains("lightMode")) {
    mode.classList.remove("darkMode").add("lightMode");
  }
}

let buttonChangeMode = document.querySelector("#buttonChangeMode");
buttonChangeMode.addEventListener("click", changeMode);

An error message is showing in the console: "Uncaught TypeError: Cannot read property 'remove' of undefined at HTMLButtonElement.changeMode"

javascript

Answer 1

Answer №1

.toggle() method of .classList is the simplest approach to achieve this functionality. It is advisable to use classes over IDs whenever possible for better code management. Further details are explained in the provided demo.

// Function to handle mode change
function switchMode(event) {
  // Event.target always refers to the element that triggered the event
  const clickedElement = event.target;
  
  // Selecting all elements with the 'all' class
  const allElements = document.querySelector('.all');

  // If the clicked element has the .mode class...
  if (clickedElement.matches('.mode')) {
    // Toggle classes on the button.mode element
    clickedElement.classList.toggle('fa-moon');
    clickedElement.classList.toggle('btn-outline-dark');
    clickedElement.classList.toggle('fa-sun');
    clickedElement.classList.toggle('btn-outline-light');
    
    // Toggle darkMode and lightMode classes on body.all
    allElements.classList.toggle('darkMode');
    allElements.classList.toggle('lightMode');
  }
  return false;
}

// Reference to the button.mode element
const modeButton = document.querySelector(".mode");

// Add a click event listener to the button.mode element
modeButton.addEventListener("click", switchMode);

.lightMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: white;
}

.darkMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: rgb(7, 8, 14);
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body class='all lightMode'>
  <main class='app container'>
    <section class='row'>
      <article class='col-6'>
        <button class="mode btn btn-outline-dark far fa-sun" type="button"></button>
      </article>
      <figure class='col-6'>
        <img src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' style='width:80%'>
      </figure>
    </section>
  </main>
</body>

</html>

Answer 2

.toggle() method of .classList is the simplest approach to achieve this functionality. It is advisable to use classes over IDs whenever possible for better code management. Further details are explained in the provided demo.

// Function to handle mode change
function switchMode(event) {
  // Event.target always refers to the element that triggered the event
  const clickedElement = event.target;
  
  // Selecting all elements with the 'all' class
  const allElements = document.querySelector('.all');

  // If the clicked element has the .mode class...
  if (clickedElement.matches('.mode')) {
    // Toggle classes on the button.mode element
    clickedElement.classList.toggle('fa-moon');
    clickedElement.classList.toggle('btn-outline-dark');
    clickedElement.classList.toggle('fa-sun');
    clickedElement.classList.toggle('btn-outline-light');
    
    // Toggle darkMode and lightMode classes on body.all
    allElements.classList.toggle('darkMode');
    allElements.classList.toggle('lightMode');
  }
  return false;
}

// Reference to the button.mode element
const modeButton = document.querySelector(".mode");

// Add a click event listener to the button.mode element
modeButton.addEventListener("click", switchMode);

.lightMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: white;
}

.darkMode .app {
  border: 1px solid #0b0b35;
  padding: 20px 15px;
  max-width: 1000px;
  max-height: 2500px;
  margin: 30px auto;
  border-radius: 10px;
  background-color: rgb(7, 8, 14);
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>

<body class='all lightMode'>
  <main class='app container'>
    <section class='row'>
      <article class='col-6'>
        <button class="mode btn btn-outline-dark far fa-sun" type="button"></button>
      </article>
      <figure class='col-6'>
        <img src='https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png' style='width:80%'>
      </figure>
    </section>
  </main>
</body>

</html>

Answer 3

Answer №2

It seems like you forgot to include an HTML snippet - Without the <body> tag having an ID like this:

<html>
...
    <body id="body">
...

You may encounter an error because when using

let mode = document.getElementById("body");

, the result could be undefined since the getElementById() function requires a valid DOM element ID value as its argument.

For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 4

It seems like you forgot to include an HTML snippet - Without the <body> tag having an ID like this:

<html>
...
    <body id="body">
...

You may encounter an error because when using

let mode = document.getElementById("body");

, the result could be undefined since the getElementById() function requires a valid DOM element ID value as its argument.

For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Answer 5

Answer №3

To toggle between light and dark mode, you can add or remove classes like this:

<script>
function toggleMode() {
  let body = document.getElementsByTagName("body")[0]; // select the body tag
  if (body.classList.contains("lightMode")) {
    body.classList.add("darkMode");
    body.classList.remove("lightMode");
  } 
  else {
    body.classList.add("lightMode");
    body.classList.remove("darkMode");
  }
}

let buttonToggleMode = document.querySelector("#buttonToggleMode");
buttonToggleMode.addEventListener("click", toggleMode);
</script>

For more information on Element.classList, refer here

Answer 6

To toggle between light and dark mode, you can add or remove classes like this:

<script>
function toggleMode() {
  let body = document.getElementsByTagName("body")[0]; // select the body tag
  if (body.classList.contains("lightMode")) {
    body.classList.add("darkMode");
    body.classList.remove("lightMode");
  } 
  else {
    body.classList.add("lightMode");
    body.classList.remove("darkMode");
  }
}

let buttonToggleMode = document.querySelector("#buttonToggleMode");
buttonToggleMode.addEventListener("click", toggleMode);
</script>

For more information on Element.classList, refer here

Using Vanilla Javascript to implement a dark mode toggle button

Answer №1

Answer №2

Answer №3

Similar questions

Generate fake data for all possible combinations using JSON faker

Upon clicking a table row, generate a div underneath containing mapped data

Discovering ways to access deeply nested JSON data in Vue JS

"Setting the minimum length for multiple auto-complete suggestions in

Storing a single JavaScript array in separate arrays depending on a specific condition

What is the process for customizing the color and thickness of the active tab inkBarStyle in React Material-UI?

Error: Unable to return callback response from NodeJs function

"Utilizing AngularJS to asynchronously send an HTTP POST request and dynamically update

Angular 2 - Changes in component properties not reflected in view

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

What are the best practices for utilizing databases with both Javascript and JSF frameworks?

Execute the function within setInterval only one time

Launching the forEach function within an ng-repeat loop was it can be done by

Calculate the total price from a combination of HTML and JavaScript options without altering the values

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

JQuery Submission with Multiple Forms

Exploring the utilization of type (specifically typescript type) within the @ApiProperty type in Swagger

Issue encountered while attempting to set up react-native project

Saving Information from an HTML Form Input?

Only one instance of the Next.js inline script is loaded