Stub dark media css query

[bahmutov]

We cannot change the media query for now in Cypress, but we could stub media query from JavaScript, so that websites that load style based on query can switch to dark mode.

Example website that loads dark theme based on the CSS media

<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="vendor/dark.css">

this works only in Safari technical preview 68 Fyrd/caniuse#4514 and is tied to the Mac OS Mojave https://paulmillr.com/posts/using-dark-mode-in-css/

But we can "emulate" this using JavaScript load in Electron / Chrome like this

<script>
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      const link = document.createElement("link")
      link.type = "text/css";
      link.rel = "stylesheet";
      link.href = 'vendor/dark.css';
      document.head.appendChild(link)
    }
</script>

And this is only to allow the code below from this module to pass to the website that we want to use the dark color mode

Cypress.on('window:before:load', win => {
  cy.stub(win, 'matchMedia').withArgs('(prefers-color-scheme: dark)').returns({
    matches: true
  })
})

Looks like this in a simple todo app

[bahmutov]

🎉 This issue has been resolved in version 1.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀