Easily Emulate Prefers-Light/Dark Mode with Chrome

This is something that we can easily forget.

Sometimes styles are picked up based on user preferences. I know since I have "prefers dark mode" enabled in my settings, I often get a pleasant dark experience on many sites.

But how do you quickly test this without changing your settings everywhere and refreshing your browser?

Easily Emulate Prefers-Light/Dark Mode with Chrome

This setting is easily toggled via the Google Developer Tools.

1) Open the dev tools: To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).

2) Open the "Run command" option: This can be done with the shortcut; Control + Shift + P (Windows / Linux) or Command + Shift + P (Mac). Or you can open the menu shown in the screenshot below on the righthand side of your console (three vertical dots) and then select "Run command".

Showing how to find the run command option in the Chrome Developer Tools

3) Run the "Emulate CSS prefers-color-scheme" command: When the search for commands opens. Start typing "dark" or "light" and you should easily find the command "Emulate CSS prefers-color-scheme: light" or "Emulate CSS prefers-color-scheme: dark". When you click this you should instantly see updates to your page if they are visible with user preferences.

Showing the command options after searching "light"

Now here's an example of what happened on the Codú blog page when I updated the settings:

Showing light mode on a Codú article

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉

Developer ToolsCSS
Avatar for Niall Maher

Written by Niall Maher

Founder of Codú - The web developer community! I've worked in nearly every corner of technology businesses; Lead Developer, Software Architect, Product Manager, CTO and now happily a Founder.


Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.