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.
Solution
Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel
- Open Developer tools (otherwise the key combination below opens the print dialog)
- Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
- Type "Show rendering"
- Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug
- How to remove/replace cached css and js file from client Browser?
- draw diagonal lines in div background with CSS
- the transition-color aren't working correctly
- Apply :focus-visible when focusing element programatically
- Set the background color of the entire webpage (the browser's window)
- HTML/CSS Flip Card Works on Desktop but not Mobile
- jQuery button click not showing/hiding content
- Force div to have an even width and height?
- How to set min width on content but still never exceed parent container width
- 2 colors in one placeholder of input field
- How can I align my Bootstrap container to fit the full width of the webpage?
- HTML+CSS A4 page with automatic page breaks
- How do I use the reverse border radius at the top of a card? (CSS)
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- Line break in HTML with '\n'
- How to achieve a CSS footer "curtain" effect?
- How To Serve Image Size Based on Container, Not Screen Size
- ASCII 3D Text looks glitchy when used for a HTML Website
- table with sticky header and horizontal scroll
- CSS: 100% width or height while keeping aspect ratio?
- move words into a specific area
- When the "display" is changed, the blocks are arranged in a column, and the margins are constantly displayed on the right
- How do I auto scroll in Angular?
- How to remove lines between cells in Material UI Table
- Adding doctype for html5 (or any doctype) breaks my site
- Setting the background of an input element as a combination of three colors
- CSS :after or :before reading dynamic values from HTML. No JS. Pure CSS
- How to style SVG with external CSS?
- How to Make an SVG Image Dynamically Match the Height (1em) and the Baseline of Surrounding Text?
- How to Apply Background Color for Children in a Repeating Pattern (Blue, Purple, Red)