Dark Mode pt. 2

Responsive design takes into account the need for a design to adapt to different platforms and screensizes. With the introduction of “dark mode,” this has also expanded to responding to different light conditions. In the same way that operating systems are setting up color schemes for low-light conditions, websites are setting up alternate color ways.

In this exercise, we will use JavaScript to create a switch that toggle between two modes of your class website.

Files

Instructions

  1. Create and style a button that will serve as a dark mode trigger in the HTML of your page

  2. Add an element to your index.html file with the id darkmode. For example, you may add the code:
<div id="darkmode" style="position: absolute; top: 10px; right: 10px; padding: 4px 8px; font-size: 9px; border-radius: 5px; background: lightgray;">
  Dark Mode Toggle
</div>
  1. Create a new blank script.js file, and add a link to it before the closing body tag.
  <script type="text/javascript" src="assets/script.js"></script>
  1. Connect your button to toggle the class for your darkmode settings. Your JS code may look something like this:
 document.querySelector('#darkmode').addEventListener('click', function() {
      document.getElementsByTagName('body')[0].classList.toggle('dark');
});
  1. Test your code by adding the following to your CSS:
body.dark {
  background: #333;
}

Then setup your dark-mode styles in your CSS file, consider how CSS styles cascade through the webpage, and how you can write specific tags using a parent class. Try and be as efficient as possible by changing your page’s appearance based on a single class.

  1. Think about how you want your “darkmode” to function. Is it solely meant to help people read your page more easily in low-light conditions? Would you want to also soothe visitors with a calming gradient animation? Consider the potential of this visual toggle beyond what may be expected.

References

Resources