teaching machines

CS 347: Lab 10 – Media Queries Continued

September 28, 2021 by . Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as much of the task below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.

Dark Mode

In addition to querying for details about the visitor’s viewport, there are many other media features for which your site can query. One particularly popular media feature facilitates the implementation of a dark mode appearance.

In implementing a dark mode appearance, it’s likely that you might like to change several style rules. “Recently” (~7 years?) there’s a feature of CSS that can be particularly useful in implementing large style changes like alternative color schemes.

CSS Custom Properties (CSS Variables)

Custom Properties provide a way to declare a label for a value that can then be referenced in other places in the CSS. A common use is to define several custom properties with some values for light mode and then other values for dark mode.

Task 1

Create a simple JMU CS-themed search interface that implements both a light and dark mode. Consider using these colors (🙌 Paige Normand):

Try to recreate it as it appears in this video. Notice the ease of testing dark/light mode with the toggle in the Firefox DevTools. Note the border, and outline colors on the input box.

Note how the colors smoothly transition between their contrasting values. You can make this happen automatically:

#element1, #element2, ... {
  transition-property: background-color, color, border-color, ...;
  transition-duration: 1s;
  transition-timing-function: ease;
}

Task 2

Let’s get ready for Halloween in here 🎃. What’s scarier than than an evil clown 🤡?

Recreate the page as shown in the video below.

TODO

The next step of your learning is to complete the following tasks:

See you next time.

Sincerely,