Option to create snapshots in "light-mode" and/or "dark-mode" / prefers-color-scheme

[t3easy]

A lot of websites have styles for light and dark mode. @media (prefers-color-scheme: dark) {} It would be useful to add a config per scenario to get screenshots in light/default, dark or both. Puppeteer offers page.emulateMedia.

https://github.com/puppeteer/puppeteer/pull/5012 https://github.com/tomayac/dark-mode-screenshot/blob/master/dark-mode-screenshot.js#L42

[garris]

This is actually pretty easy to do. Here is an example.

In your config you could add an emulateDark to your viewport props...

  "viewports": [
    {
      "label": "phone",
      "emulateDark": false,
      "width": 320,
      "height": 480
    },
    {
      "label": "phone_dark",
      "emulateDark": true, 
      "width": 320,
      "height": 480
    }
  ],

Then customize the onReady script to look at the emulateDark prop and do the thing...

module.exports = async (page, scenario, vp) => {
  console.log('SCENARIO > ' + scenario.label);
  await require('./clickAndHoverHelper')(page, scenario);

  // Example: changing behavior based on viewport properties
  if (!!vp.emulateDark) {
    await page.emulateMediaFeatures([{
    name: 'prefers-color-scheme', value: 'dark' }]);
  }
};

[t3easy]

Thanks for your fast response! I've added it to my demo project https://github.com/t3easy/BackstopJS-Demo/commit/b7c5eb7f156ed9afafd664d313747a497c1afbc4

[Dok11]

But it doesn work if you want to set prefers-contrast: more because:

Puppeteer encountered an error while running scenario "Home Page"
Error: Unsupported media feature: prefers-contrast