feat: emulate prefers-color-scheme

It would be interesting to simulate different values of prefers-color-scheme, so developers could write visual tests for light and dark mode.

Possible API:

page.emulate({
  viewport: {
     colorScheme: 'dark'
  }
});

There is an article of how this could be achieved: https://www.bram.us/2019/09/04/take-both-light-and-dark-mode-screenshots-with-puppeteer/

But seems rather hacky and unperformant, since it needs to boot up two completely different chrome instances.

[tomayac]

Heya, @tomayac here, author of the “hacky” and “unperformant” solution https://github.com/tomayac/dark-mode-screenshot. I would very much +1 a native way in Puppeteer, as typically the flags that my approach uses at the moment tend to be rather ephemeral.

Different than the proposal above, I would, however, vouch for a more generic approach that allows for testing all current and potential future User Preference Media Features, like prefers-reduced-motion, prefers-contrast etc.

My idea would be to have a field where one can shove the different media features à la

{
  …
  userPreferences: {
    "prefers-color-scheme": 'dark',
    "prefers-reduced-motion": 'reduce',
  }
  …
}

I’m not that familiar with the Puppeteer API, so would leave it to the authors to decide where such a field would live best.

[manucorporat]

Seems like this issue was shipped with page.emulateMedia()!