{"id":13039,"library":"cypress-dark","title":"Dark Mode for Cypress Test Runner","description":"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.","status":"maintenance","version":"1.8.3","language":"javascript","source_language":"en","source_url":"https://github.com/bahmutov/cypress-dark","tags":["javascript","cypress","cypress-io","dark","theme"],"install":[{"cmd":"npm install cypress-dark","lang":"bash","label":"npm"},{"cmd":"yarn add cypress-dark","lang":"bash","label":"yarn"},{"cmd":"pnpm add cypress-dark","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a Cypress plugin and requires Cypress to function. It styles the Cypress test runner UI.","package":"cypress","optional":false}],"imports":[{"note":"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.","wrong":"import 'cypress-dark'","symbol":"DefaultDarkTheme","correct":"require('cypress-dark')"},{"note":"Applies the specialized Halloween theme. Like the default dark theme, this should be used with `require()` in your Cypress support file.","wrong":"import 'cypress-dark/src/halloween'","symbol":"HalloweenTheme","correct":"require('cypress-dark/src/halloween')"}],"quickstart":{"code":"/* Install the package */\nnpm install --save-dev cypress-dark\n\n/* Add to your cypress/support/index.js file */\n// For the default dark theme:\nrequire('cypress-dark')\n\n// Or, for the Halloween theme:\n// require('cypress-dark/src/halloween')\n\n/* Optional: Configure cypress.json to enable dark mode for the app under test */\n// In your cypress.json file:\n// {\n//   \"darkMediaQuery\": true,\n//   \"theme\": \"dark\" // Or \"halloween\"\n// }\n\n// Example Cypress test showing theme interaction (assuming darkMediaQuery is true)\n// cypress/e2e/my-dark-mode-test.cy.js\ndescribe('Dark Mode Application', () => {\n  it('should render the application in dark mode', () => {\n    // When darkMediaQuery is true in cypress.json, window.matchMedia is stubbed\n    // to report 'dark' preference, forcing the app to dark mode if it respects it.\n    cy.visit('http://localhost:3000/your-dark-mode-app')\n    cy.get('body').should('have.css', 'background-color', 'rgb(0, 0, 0)') // Example assertion\n    // The Cypress test runner itself will also be in dark mode.\n  })\n})","lang":"javascript","description":"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."},"warnings":[{"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.","message":"This 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.","severity":"gotcha","affected_versions":">=1.8.3"},{"fix":"Ensure your development environment uses Node.js version 6 or higher. It is recommended to use an actively maintained LTS Node.js version.","message":"The 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.","severity":"gotcha","affected_versions":"<6.0.0"},{"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.","message":"While 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.","severity":"deprecated","affected_versions":">=1.8.3"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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'`.","cause":"The `cypress-dark` package is either not installed as a dependency or the `require()` path in your `cypress/support/index.js` file is incorrect.","error":"Module not found: Error: Can't resolve 'cypress-dark'"},{"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.","cause":"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`.","error":"Error: `require()` is not supported in the browser. You must `require()` from a Node.js environment."},{"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.","cause":"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.","error":"Dark theme not applying or applying incorrectly to Cypress Test Runner."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}