Dark Mode

Responding to the visitor’s environment

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.

Technical Notes

  1. Create and style a button that will serve as a dark mode trigger in the HTML of your page
<button id="darkmode">Your Button</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.
.darkmode{
  background: black;
  color: white;
}

.darkmode h1{
  color: yellow;
}
  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. Here, we will toggle the styles by adding a class to the containing body. This way, we can write new rules for elements that have a body with the container class.

Your code may look something like this:

$(document).ready(function(){
     $("#darkmode").click(function(){ $('body').toggleClass('darkmode');});
});
  1. As you add new style rules, think about how you want your “darkmode” to function. You might consider experimenting with other adjustments instead of styling an inverse-color theme. Think about how your typography might adapt to a darker background. Consider the potential of this visual toggle beyond what may be expected.

References

Resources