/dark-mode-screenshot

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

Primary LanguageJavaScriptApache License 2.0Apache-2.0

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

👩‍💻 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