Skip to main content

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

Cypress Dark Theme

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 


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

Halloween Theme


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.

Cypress halloween theme

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

Video Tutorial: Install Cypress Dark and Halloween Theme

Submitted by arilio666 on April 27, 2022

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.


At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.