Cypress Dark and Halloween Themes

If you want to switch to Dark Theme for Cypress Test Runner, you can use Cypress Dark Plugin. This plugin comes bundled with two themes, Cypress Dark and Halloween. Let us see how we can install this on our cypress environment step by step.

Step 1: Install Dark Theme

Note: To install what we are about to see now requires node six or above.

npm install --save-dev cypress-dark

Entering the following command in the terminal will result in installing the dark theme.

Step 2: Configuration

Go to cypress/support/index.js and add the following lines.

Dark Theme 

require('cypress-dark')

These lines of code will let cypress know of the dark theme that is installed.

Halloween Theme

require('cypress-dark/src/halloween')

Step 3: JSON Configuration

Go to the cypress.json file and add the following.

{
  "theme": "dark"
}

This is the place to let cypress know which theme it should prefer, dark or any other.

Step 4: Execute your Test

After these tweaks, we can see a dark test runner with a creepy laugh when the test fails.

Dark Page Under Test

You can switch the dark mode for the web application under test using media (prefers-color-scheme: dark) if the application uses a JavaScript media query to check for the preferred scheme. 

To enable stubbing window.matchMedia from your tests and "force" your app to switch to dark mode, set the option in cypress.json

{
  "darkMediaQuery": true
}