{"id":13045,"library":"cypress-runner-themes","title":"Cypress Runner Themes","description":"Cypress Runner Themes is a utility package providing alternative visual themes for the Cypress Test Runner, supporting versions 10 and higher. Its current stable version is v1.0.4, with releases occurring periodically to maintain compatibility with new Cypress major versions or address bug fixes. The package offers 'dark', 'light', and 'colorblind' modes, consolidating functionality often found in separate packages like `cypress-dark` or `cypress-light-theme`. A key differentiator is its specific colorblind mode designed for Deutan and Protan types, which changes passing tests to yellow and failing to red. Users enable themes by setting an environment variable in `cypress.config.js` and importing the package for its side effects, though themes currently only apply after the first test run.","status":"active","version":"1.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/dingraham/cypress-runner-themes","tags":["javascript","cypress","cypress.io","cypress-plugin","theme"],"install":[{"cmd":"npm install cypress-runner-themes","lang":"bash","label":"npm"},{"cmd":"yarn add cypress-runner-themes","lang":"bash","label":"yarn"},{"cmd":"pnpm add cypress-runner-themes","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is imported for its side effects (applying CSS themes) and does not export any symbols for direct use. It is primarily used in ESM contexts within Cypress support files.","wrong":"const theme = require('cypress-runner-themes');","symbol":"Side Effect Import","correct":"import 'cypress-runner-themes';"}],"quickstart":{"code":"npm install --save-dev cypress-runner-themes\n\n// cypress.config.js\nconst { defineConfig } = require('cypress');\n\nmodule.exports = defineConfig({\n  e2e: {\n    setupNodeEvents(on, config) {\n      // implement node event listeners here\n    },\n    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',\n  },\n  env: {\n    theme: 'dark' // Set your desired theme here: 'dark', 'light', or 'colorblind'\n  }\n});\n\n// cypress/support/e2e.js (or equivalent support file)\nimport 'cypress-runner-themes';","lang":"typescript","description":"Installs the package, configures a dark theme via `cypress.config.js`, and imports the theme plugin in the `support/e2e.js` file, demonstrating how to apply visual themes to the Cypress Test Runner."},"warnings":[{"fix":"Monitor the package's GitHub repository for updates and compatibility fixes after upgrading Cypress. Report issues if a theme breaks following a Cypress update.","message":"Themes may break unexpectedly with future Cypress Test Runner updates. The package relies on internal Cypress UI structures, which are subject to change.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"After launching the Cypress Test Runner, start or run any test to see the theme applied. It will not appear immediately upon opening the runner.","message":"The applied theme will only become visible in the Cypress Test Runner after the first test has started running. There is currently no hook to inject the theme on initial runner load.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware that the current `env.theme` configuration method for the `colorblind` theme might evolve in future major versions. Consult the package's changelog for migration guides when updating.","message":"The `colorblind` theme is explicitly named. Future versions plan to remove explicit theme names like 'Colorblind' and integrate toggle functionality within the runner itself, potentially changing how themes are selected.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `env.theme` is correctly set in `cypress.config.js` (e.g., `theme: 'dark'`) and `import 'cypress-runner-themes';` is present in your primary Cypress support file (e.g., `cypress/support/e2e.js`). Then, run at least one test in the Cypress Test Runner.","cause":"The theme is applied only after the first test begins, or configuration/import is missing.","error":"Cypress Test Runner appears with default theme despite configuration."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":""}