Add macOS Mojave Dark Mode support to your website

The last version of macOS, macOS Mojave, includes a very cool feature that we see really everywhere. The Dark Mode is a trendy thing and can be easily supported by your website by adding a few lines in your css file.

Medias queries

Quick explanation

Medias queries are used in CSS to add some specific style depends on browser behavior.

For example, you can add CSS properties when the browser is at some breakpoint. In this case, it can be very useful to make your website responsive by resizing elements in the page.

The prefers-color-scheme media query

This media query will detect user preferences about his current theme. It can be completed by a parameter :

Snippet

@media (prefers-color-scheme: dark) {
  body {
    background: #2f2f2f;
    color: #ffffff;
  }
}

In this example, we will change body background color and text color when user specified the dark theme.

Accessibility

Changing the main theme color of your website can require a lot of color modifications. Don’t forget to update links colors on hover, active and every others colors that can be updated.

Compatibility