feat: use option darkMediaQuery to enable stubbing dark media

README.md

@@ -56,6 +56,22 @@ For now all themes are shipped with this package and can use CSS variables. Avai
 - [dark](src/dark.css) see [images/dark.png](images/dark.png)
 - [halloween](src/halloween.css) see [images/halloween.png](images/halloween.png)
 
+## Dark page under test
+
+You can "tell" the web application under test to switch to the dark mode using `media (prefers-color-scheme: dark)` if the application uses JavaScript media query to check for preferred scheme. See original issue [#29](https://github.com/bahmutov/cypress-dark/issues/29) and [cypress/fixtures/custom-dark.html](cypress/fixtures/custom-dark.html) page.
+
+To enable stubbing `window.matchMedia` from your tests and "force" your app to switch to dark mode, set option in `cypress.json`
+
+```json
+{
+  "darkMediaQuery": true
+}
+```
+
+Result - both the test runner and the application are running in dark mode.
+
+![Dark application](images/dark-media.png)
+
 ### Small print
 
 Author: Gleb Bahmutov <gleb.bahmutov@gmail.com> © 2018

cypress.json

@@ -1,5 +1,6 @@
 {
   "projectId": "ipnbuo",
   "viewportWidth": 1200,
-  "viewportHeight": 1200
+  "viewportHeight": 1200,
+  "darkMediaQuery": true
 }

cypress/integration/custom-dark-spec.js

@@ -9,4 +9,9 @@ describe('custom dark theme', () => {
       .and('have.css', 'background-color', 'rgb(34, 34, 34)')
     cy.get('@dark-media-query').should('have.been.calledOnce')
   })
+
+  it('works again', () => {
+    cy.visit('cypress/fixtures/custom-dark.html')
+    cy.get('@dark-media-query').should('have.been.calledOnce')
+  })
 })

src/utils.js

@@ -46,6 +46,8 @@ const hasSuiteFailed = suite => {
 
 const isTheme = theme => getTheme() === theme
 
+const shouldStubMediaQuery = () => Boolean(Cypress.config('darkMediaQuery'))
+
 /**
  * returns a function that a `before` callback can call to load desired theme
  * @example before(toLoadTheme('halloween'))
@@ -87,6 +89,10 @@ const loadTheme = theme => {
 }
 
 const stubMediaQuery = () => () => {
+  if (!shouldStubMediaQuery()) {
+    return
+  }
+
   // if website supports loading dark theme styles via JavaScript
   // then tell it to. Website should ask like this
   // if (window.matchMedia('(prefers-color-scheme: dark)').matches) {