cypress-dark

library1.8.3jsnpmunverified

cypress-dark is a utility package for Cypress that provides customizable dark themes for the Cypress Test Runner UI. It is currently stable at version `1.8.3`, with the last significant update occurring in late 2021. The package's release cadence appears to be infrequent, primarily addressing bug fixes or compatibility issues with Cypress rather than consistently introducing new features. Its key differentiators include offering several pre-defined themes, such as 'dark' and 'halloween', and a unique feature to programmatically force the application under test into dark mode by stubbing `window.matchMedia`. This functionality is highly useful for thoroughly testing applications that implement `prefers-color-scheme` logic. It integrates directly into the `cypress/support/index.js` file for straightforward activation within your Cypress project setup.

testing

npm install cypress-dark

github ↗package ↗

INSTALL

IMPORT

SIG · CYPRESS-DARK

cypress-dark

testingjavascriptv1.8.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

DefaultDarkTheme

✓ require('cypress-dark')

✗ import 'cypress-dark'

This package is designed for CommonJS `require()` in Cypress support files (e.g., `cypress/support/index.js`). Direct ES module `import` syntax is not typically supported without additional build configuration for support files.

HalloweenTheme

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

✗ import 'cypress-dark/src/halloween'

Applies the specialized Halloween theme. Like the default dark theme, this should be used with `require()` in your Cypress support file.

This quickstart demonstrates how to install `cypress-dark`, apply a theme to the Cypress Test Runner via `cypress/support/index.js`, and optionally configure `cypress.json` to force the application under test into dark mode for testing responsive themes.

/* Install the package */ npm install --save-dev cypress-dark /* Add to your cypress/support/index.js file */ // For the default dark theme: require('cypress-dark') // Or, for the Halloween theme: // require('cypress-dark/src/halloween') /* Optional: Configure cypress.json to enable dark mode for the app under test */ // In your cypress.json file: // { // "darkMediaQuery": true, // "theme": "dark" // Or "halloween" // } // Example Cypress test showing theme interaction (assuming darkMediaQuery is true) // cypress/e2e/my-dark-mode-test.cy.js describe('Dark Mode Application', () => { it('should render the application in dark mode', () => { // When darkMediaQuery is true in cypress.json, window.matchMedia is stubbed // to report 'dark' preference, forcing the app to dark mode if it respects it. cy.visit('http://localhost:3000/your-dark-mode-app') cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)') // Example assertion // The Cypress test runner itself will also be in dark mode. }) })

Debug

Known issues

gotchaThis package has not been updated since late 2021. Newer major versions of Cypress (e.g., Cypress 10+) may have made internal DOM structure or CSS changes that could break `cypress-dark`'s styling injection, leading to visual glitches or partial theme application.

fix

If encountering issues with newer Cypress versions, inspect the Cypress runner's DOM for changes and consider applying custom CSS overrides in your `cypress/support/index.js` or forking the project. Compatibility is not guaranteed for recent Cypress releases.

affects: >=1.8.3

gotchaThe package officially requires Node.js version 6 or above. Using significantly older Node.js environments may lead to installation failures or runtime errors due to dependency incompatibilities.

fix

Ensure your development environment uses Node.js version 6 or higher. It is recommended to use an actively maintained LTS Node.js version.

affects: <6.0.0

deprecatedWhile still functional, the lack of recent updates suggests limited ongoing maintenance. New features or prompt bug fixes for compatibility with future Cypress versions are unlikely.

fix

For long-term projects or critical applications, consider evaluating the stability with your specific Cypress version or being prepared to maintain custom styling solutions if `cypress-dark` ceases to meet requirements.

affects: >=1.8.3

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'cypress-dark'

The `cypress-dark` package is either not installed as a dependency or the `require()` path in your `cypress/support/index.js` file is incorrect.

fix

Ensure the package is installed as a dev dependency (`npm install --save-dev cypress-dark`) and that the `require()` statement in your support file correctly references `'cypress-dark'` or `'cypress-dark/src/halloween'`.

Error: `require()` is not supported in the browser. You must `require()` from a Node.js environment.

Attempting to use `require('cypress-dark')` or similar in a Cypress spec file (which runs in the browser context) instead of the Node.js context of `cypress/support/index.js`.

fix

Move all `require('cypress-dark')` statements to `cypress/support/index.js` or a file that is imported by it. This file is executed in Node.js before your tests run in the browser.

Dark theme not applying or applying incorrectly to Cypress Test Runner.

The `require()` statement for `cypress-dark` might be incorrectly placed, conflicts with other Cypress plugins, or there are breaking CSS changes in newer Cypress versions that `cypress-dark` doesn't account for.

fix

Verify that `require('cypress-dark')` is at the very top of your `cypress/support/index.js` file to ensure it's loaded first. Check your browser's developer tools for any conflicting CSS rules. If using a very recent Cypress version, the package may require manual CSS adjustments or overrides to function fully.

Upgrade

Version history

1.8.3latest on npm

Audit

Dependencies

cypressrequiredThis package is a Cypress plugin and requires Cypress to function. It styles the Cypress test runner UI.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/bahmutov/cypress-dark ↗

packagehttps://www.npmjs.com/package/cypress-dark ↗