Apart from the quite well known prefers-color-scheme and prefers-reduced-motion features, the Media Query Level 5 spec comes with a few more new ones. The Media Query Level 5 spec is being drafted as we speak, and it includes some really nice ones. Some of them are still being figured out, but several of them are …
Tag Archives: media queries
Take both Light and Dark Mode screenshots with Puppeteer
dark-mode-screenshot is a Puppeteer script to take screenshots of both the light and dark mode versions of a website. $ npx dark-mode-screenshot –url https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html –output screenshot –fullPage Works in somewhat odd way first requiring the OS to have dark mode enabled (?), and then launch Chromium: Once with prefers-color-scheme disabled (using –disable-blink-features=MediaQueryPrefersColorScheme) Once with Dark …
Continue reading “Take both Light and Dark Mode screenshots with Puppeteer”
CSS Color Scheme Queries (“Dark Mode CSS”)
Next to Safari 12.1 earlier this month, Firefox 67 now also supports “CSS Color Scheme Queries”. The prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android. Chrome will support + …
Continue reading “CSS Color Scheme Queries (“Dark Mode CSS”)”