Take both Light and Dark Mode screenshots with Puppeteer

Leave a comment on 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:

  1. Once with prefers-color-scheme disabled (using --disable-blink-features=MediaQueryPrefersColorScheme)
  2. Once with Dark Mode force enabled (using --force-dark-mode)

dark-mode-screenshot (GitHub) →

❓ New to Dark Mode? No worries, this post on CSS Color Scheme Queries has got you covered.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.