Cypress-light-theme NPM

`cypress-light-theme`

cypress-light-theme adds a completely unofficial "light theme" for the Cypress App's Command Log in Cypress v10+, allowing the user to either follow the system preference for light/dark mode or, with an environment variable, to force one or the other to always be set.

Inspired by the cypress-dark package by @bahmutov for Cypress 9 and below, we wanted to do something quick that did not require official designs for the theme, or for the code changes necessary to support a full theme system. This means that as Cypress changes over time, this light theme may break in unexpected ways. Please create and issue (or a Pull Request ❤️) if something is wrong.

This package is created and maintained by @marktnoonan, @mapsandapps, and @viniciuspietscher.

Install

npm

npm install --save-dev cypress-light-theme

yarn

yarn add --dev cypress-light-theme

in cypress/support/e2e.js (for e2e tests) and/or cypress/support/component.js (for component tests),

import setLightTheme from 'cypress-light-theme'

setLightTheme()

Configuration

By default, it follows the preference of your operating system:

https://user-images.githubusercontent.com/8340719/185812903-b7aa6064-b0f2-4387-b693-691f72d694b2.mov

The theme of the Command Log can be set with a THEME environment variable to be light, dark or system. The default is system. The environment variable can be set in your configuration file:

// cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
    env: {
        THEME: 'light'
    }
})

This can be overridden by setting CYPRESS_THEME from the command line. Learn more about how environment variables work in Cypress.

Development

npm install
npx cypress open

TODO

error handling
design tweaks
clean up style sheet getting added & removed?
documentation
finish checking that colors are accessible
fix text select color
use system setting by default
~~add a way to change this to the settings page~~ (not doing this for v1, went with environment variables instead)
remove the button being injected into the reporter
submit to the plugins list