Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use Media Queries to Adapt to a User's Preferred Color Scheme


    Kayla shows how to use the prefers-color-scheme media query in CSS to use system preferences to determine whether we need to display a website in light mode or in dark mode. This lesson starts in light mode and adds additional styles for dark mode (prefers-color-scheme: dark). However, this also applies when going from dark mode to light mode (prefers-color-scheme: light). The example only uses HTML and CSS, but you can use whatever front-end development method or framework you want as long as you can write media queries.

    The first thing to do is to add the prefers-color-scheme media query for the color scheme you're responding to. Then, add CSS selectors for the corresponding HTML elements that need to change colors to your media query section. In this example, the elements that needed to change colors were the body, anchor tags, active navigation list item, and button.