A light theme for the Cypress App Command Log
npm install cypress-light-themecypress-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.
``sh`
npm install --save-dev cypress-light-theme
`sh`
yarn add --dev cypress-light-theme
in cypress/support/e2e.js (for e2e tests) and/or cypress/support/component.js (for component tests),
`js
import setLightTheme from 'cypress-light-theme'
setLightTheme()
`
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:
`js
// 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.
`sh``
npm install
npx cypress open
- [x] error handling
- [x] design tweaks
- [x] clean up style sheet getting added & removed?
- [x] documentation
- [x] finish checking that colors are accessible
- [x] fix text select color
- [x] 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)
- [x] remove the button being injected into the reporter
- [ ] submit to the plugins list