Dark Mode and CSS

Text

This text color should change when you click on the Switch Themes button below. The background-color of the body and the border-color used on the header above will change, too. This can be automated with media queries.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Controls

These are two common controls that will change with the Switch Themes button.

Scrollbars

Scrollbars change with the theme, but are buggy because the technique is almost ten years old and not a standard. But help is on the way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Media Query

If the background color of this section is pink, the prefers-color-scheme media query is not available with this browser.

When the media query is present, the background color will switch between yellow and purple as you change the Dark Mode setting in System Preferences. You may need to enable this experimental feature in the browser (for example, the Develop menu.)

Please turn on JavaScript to determine the current color scheme.

See checkPrefersColorScheme() in this page to learn more.

The image below shows how a media query can be used to select an image in a <picture> container. Generally, you'll want to use hero images that work in both dark and light contexts, so use this capability sparingly.

prefers-color-scheme is not available in this browser