How to Simulate Light and Dark Mode with Chrome Dev Tools

If your developing a website with light and dark mode, you should use the users prefered color scheme on first render. But how do you test that this is working?

Since late 2019, it has possible in Chrome Dev Tools to easily toggle between prefers-color-scheme: dark and prefers-color-scheme: light .

1. Open your Dev Tools, you can find them by clicking the three dots in the top right corner, followed by More Tools > Developer Tools.

   

2. Open your command tools, you can do with by pressing Ctrl+Shift+P on Windows or Command+Shift+P on Mac. Alternatively, you can click the three dots. in the top right (within the dev tools menu) and click Run Command.

   

3. In the drop menu, search for Show Rendering and select it.

   

4. The Rendering tab should now be open. Search within it for the setting Emulate CSS media feature prefers-color-scheme.

   

5. You can now use this dropdown setting to easily switch between light and dark mode.

---

Thanks for reading 🙏

Did you find this guide helpful? Let me know in the comments, or just say hi 👋.

Until next time, Happy Coding!