Mini-Exercise: Dark Mode

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.

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

Files

Instructions

  1. Add a button with the id of darkmode to your class site index.html file. This will serve as a dark mode trigger in the HTML of your page.
    <button id="darkmode">Dark Mode</button>
  1. 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. Add something like the following to your CSS:
body.darkmode {
    background: black;
    color: white;
}
  1. Add a jQuery script tag in the head of your document to load in the jQuery library:
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  1. Create a new blank script.js file, and add a link to it under your jQuery script tag:
  <script type="text/javascript" src="script.js"></script>
  1. Connect your button to toggle the class for your darkmode settings. Your code may look something like this in your script.js file:
$(document).ready(function(){
     $("#darkmode").click(function(){ 
        $('body').toggleClass('darkmode');
     });
});
  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