Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

381
Views
How can I emulate prefers-color-scheme media query in Chrome?

Chrome 76 has added support for prefers-color-scheme media query (a.k.a. "dark mode").

But how can I test my webpage in both color schemes easily, without toggling the system dark mode on and off?

Here is the same question for Firefox, but I can't find similar settings in Chrome & Chrome DevTools.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

This is a Chrome DevTools feature request that is tracked in crbug.com/977243 (star the bug or CC: yourself to be notified of progress). Meanwhile, it's already available in Safari's Web Inspector, see the heading Debugging Dark Mode in Apple's blog post.

As an alternative, if you want to automate the whole process, I have written a Puppeteer script that takes screenshots in dark and light mode, which can also be integrated in your CI testing.

over 4 years ago · Santiago Trujillo Report

0

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

  1. Open Developer tools (otherwise the key combination below opens the print dialog)
  2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
  3. Type "Show rendering"
  4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

drop down to select the mode

over 4 years ago · Santiago Trujillo Report

0

How to emulate/activate prefers-color-scheme on Chrome (Desktop):

  1. Press F12 key (or Command+Shift+C on Mac)
  2. Click on the tree dots simbol (customize and control DevTools)
  3. Point your mouse on the more tools option, and then click in rendering option.
  4. the option Emulate CSS media feature prefers-color-scheme near the end it's your destination ! dumb visual guide to open color scheme

How to emulate/activate prefers-color-scheme on Chrome (Mobile):

  1. Click on the tree dots simbol.
  2. Click on Settings.
  3. Click on theme.
  4. Select you desired option !

Yay !!!

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!