7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. CSS

Quick Tip: How to Implement Dark Mode in Your Website Using Media Queries

Scroll to top
Read Time: 2 mins

In this Envato Tuts+ quick tip we’ll take a look at an experimental CSS feature which detects whether a user has “dark mode” enabled on their Mac. It’s done via a media query, and will allow you to style a website “dark” or “light” accordingly. Let’s take a look!

How to Implement “Dark Mode” via CSS

What is “Dark Mode”?

Last year MacOS Mojave introduced a way to toggle between “dark” and “light” appearance (dark mode can be much easier on the eyes, particularly in low light conditions). This toggling affects the UI, changing the visual appearance of elements such as menu bars, panels, buttons and so on. 

Beyond the MacOS UI, this setting is also open to other applications, so apps which take advantage of it will also toggle between dark and light versions depending on the user’s preference.

“Dark Mode” in CSS

Using the prefers-color-scheme media query we can leverage this dark mode setting within our websites too. The syntax looks something like this:

We can use dark or light as values within the media query. In the example above we’re stating that if a user has dark mode enabled, we’ll apply some different styles. Try the demo below by toggling your dark/light appearance:


Be warned: this is all highly experimental. As of the time of writing this feature only works in one browser: Safari Technology Preview. However, it’s being discussed in working groups, and we’re already seeing glimpses of it in the Webkit source code.


That’s it for this quick tip! What are your thoughts on it? Should this be something we implement in our websites? Would you use it? Are media queries being pushed beyond what they should be used for? Let us know!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.