dark-mode-screenshot

Dark Mode Screenshot 📷🌒

This Puppeteer script takes a screenshot of a webpage in Light and Dark Mode.

Dark Mode	Light Mode
screenshot-dark.png	screenshot-light.png

⚠️ Prerequisite

For this script to work, you need to activate Dark Mode in your operating system. Please see the instructions for various operating systems on how to do that. The script will programmatically force Dark Mode off for taking the light screenshot.

👩‍💻 Usage

Locally from the command line:

$ node dark-mode-screenshot.js --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Without installing remotely from npm:

$ npx dark-mode-screenshot --url https://googlechromelabs.github.io/dark-mode-toggle/demo/ --output screenshot --fullPage --pause 750

Parameter (long)	Parameter (short)	Description
--url	-u	The URL of the webpage, defaults to https://googlechromelabs.github.io/dark-mode-toggle/ demo/index.html.
--output	-o	The file prefix of the screenshot (there will be a light and a dark file), defaults to screenshot.
--fullPage	-f	Whether or not to take a full page screenshot, defaults to true.
--pause	-p	Time in milliseconds to pause before taking each screenshot, defaults to 0.

Acknowledgements

Thanks to @mathiasbynens for implementing page.emulateMediaFeatures(features) in Puppeteer and for making this script a lot lighter.

📄 License

Apache 2.0