Dark Mode Toggle

by Stephen

HTML

<body>
 <h1>A Heading</h1>
 <div>
 <input id="nightmode" type="checkbox">
 <label for="nightmode">Activate night mode</label>
 </div>
 
 <section>
     <p>A section with a paragraph</p>
 </section>
 <section>
     <p>A second section</p>
 </section>
 <footer>The footer</footer>
</body>

CSS

body {
    color: black;
    background-color: white;
}
body.nightmode {
    color: white;
    background-color: black;
}

JavaScript

//$('#nightmode').change(function() {
//    $('body').toggleClass('nightmode');
//});
document.getElementById('nightmode')
        .addEventListener('change', function(e) {
            document.body.classList.toggle('nightmode')
        });