javascripthtmlcssdarkmode

Dark Theme Toggle Button Code Not Working?


My code, shown below, for a dark theme toggle button isn't working; Visual Studio Code isn't telling me I have any errors. Can someone help me figure out what the issue is?

document.getElementById('themeButton').addEventListener('click'),
  function() { /* Theme button script */
    document.body.classList.toggle('dark-theme');
  }
body {
  background-color: rgb(246, 246, 246);
  color: black;
  h1 {
    color: rgb(63, 66, 145);
    /* Header 1 features */
    font-size: 50px;
    padding-bottom: 8px;
    margin: 10px;
  }
  h2 {
    font-family: Arial, Helvetica, sans-serif;
    /* Header 2 features */
    margin: 10px;
  }
  p {
    font-family: Arial, Helvetica, sans-serif;
    /* Paragraph features */
    font-size: 20px;
    padding-bottom: 10px;
    margin: 10px;
  }
  /* Dark theme styles */
  .dark-theme {
    background-color: #A9a9a9;
    /* Dark gray background */
    color: #F5F5F5/* Light gray body text */
  }
  .dark-theme h1 {
    color: rgb(170, 172, 244)/* Light blue text for header 1 */
  }
}
<h1>Basic Website</h1>
<!-- Site text content -->
<hr>
<h2>Welcome to my basic webpage.</h2>
<p>This isn't my first time coding, but it's been so long that it might as well be.</p>

<img src="treehouse.jpg" alt="An elaborate treehouse.">
<!-- Image -->
<hr>

<button id="themeButton">Change Theme Color</button>
<!-- Theme button -->

The button should change the background to a dark gray, and the text should become light gray, but the button changes nothing when clicked.


Solution

  • You have an error here

    document.getElementById('themeButton').addEventListener('click'), function() { /* Theme button script */ document.body.classList.toggle('dark-theme'); }

    You must pass the function as the second argument to addEventListener, like this

    document.getElementById('themeButton').addEventListener('click', function() { /* Theme button script */
        document.body.classList.toggle('dark-theme');
    });
    

    You also have to move your .dark-theme CSS rules outside of body, because if you use it like in your example, it can only affect body's children, not body itself.

    body {
        /* Main body styles */
    }
    /* Dark theme styles */
    .dark-theme {
     
    }