Last active
December 31, 2023 00:58
-
-
Save Cerberus/72d0705758e917bdb0aa7fcef8f4436e to your computer and use it in GitHub Desktop.
Simple way to apply dark mode (CSS)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// cypress/support/style.ts | |
export {} | |
const css = /* css */ ` | |
:root { | |
--background: #222426; | |
--dark-background: #171717; | |
--lighter-background: #3a3a3a; | |
--light-element: #444648; | |
--active-button: #292c2e; | |
--active-color: #cccccc; | |
--button-border: 1px solid #3a3a3a; | |
--command-border: 1px solid #606060; | |
--command-important-border: 1px solid #aaaaaa; | |
--active-command-border: 1px solid #707070; | |
--highlighted-text: #dddddd; | |
--pinned-command-background-color: #3b1654; | |
--pinned-command-background-color-hover: #531f77; | |
--icons-color: #999999; | |
--icons-hover-color: #cccccc; | |
/* passed and failed commands */ | |
--failed-command-background-color: inherit; | |
--state-failed-background-color: #ae3a46; | |
--state-failed-color: #f0adad; | |
} | |
.reporter { | |
background-color: var(--background); | |
} | |
.runner header { | |
background-color: var(--background); | |
box-shadow: none; | |
} | |
.runner header .url { | |
color: #aaaaaa; | |
background-color: var(--background); | |
} | |
.runner .url:hover, | |
.runner .url:focus, | |
.runner .url:active { | |
color: #eeeeee; | |
} | |
.runner .highlighted .url { | |
background-color: var(--light-element); | |
} | |
.runner .url:focus { | |
background-color: var(--light-element); | |
} | |
.runner .viewport-info button { | |
text-shadow: none; | |
} | |
.runner .viewport-info button:hover { | |
color: var(--active-color); | |
} | |
.runner { | |
background-image: none; | |
background-color: #2a2a2a; | |
box-shadow: none; | |
} | |
.reporter .container { | |
border: none; | |
box-shadow: none; | |
} | |
.runner .selector-playground-toggle:hover { | |
background: none; | |
color: var(--active-color); | |
} | |
.reporter .runnable-header { | |
background-color: var(--background); | |
color: var(--active-color); | |
} | |
.reporter header { | |
background-color: var(--background); | |
color: var(--active-color); | |
border-bottom: var(--button-border); | |
} | |
.reporter header button { | |
background-color: var(--background); | |
} | |
.reporter header button:hover { | |
background-color: var(--background); | |
color: var(--active-color); | |
} | |
.reporter .runnable { | |
background-color: var(--background); | |
} | |
.reporter .runnable:hover { | |
background-color: var(--background); | |
} | |
.reporter .commands-container { | |
background-color: var(--active-button); | |
} | |
.reporter .command-wrapper{ | |
background-color: var(--active-button); | |
} | |
.reporter .command-wrapper:hover { | |
background-color: var(--active-button); | |
color: var(--highlighted-text); | |
box-shadow: none; | |
-webkit-box-shadow: none; | |
} | |
.reporter .focus-tests button { | |
border-right: var(--button-border); | |
} | |
.reporter .stats .duration { | |
border-left: var(--button-border); | |
border-right: var(--button-border); | |
} | |
.reporter .controls > span:last-child button { | |
border-right: var(--button-border); | |
} | |
.reporter .command-state-pending > span > .command-wrapper { | |
background-color: var(--lighter-background); | |
} | |
.reporter .command-type-parent { | |
border-top: var(--command-border); | |
} | |
.reporter .command-type-parent:hover { | |
border-top: var(--active-command-border); | |
} | |
.runner .aut-iframe { | |
background-color: var(--background); | |
} | |
.reporter .runnable.suite > div > .runnable-wrapper .runnable-title { | |
color: var(--active-color); | |
} | |
.reporter .hooks-container .hook-name:hover { | |
color: var(--highlighted-text); | |
} | |
.reporter .command-is-pinned > span > .command-wrapper { | |
background-color: var(--pinned-command-background-color); | |
} | |
.reporter .command-is-pinned > span > .command-wrapper:hover { | |
background-color: var(--pinned-command-background-color-hover); | |
} | |
.runner .message-controls { | |
background-color: var(--background); | |
} | |
.runner .snapshot-controls.showing-selection .toggle-selection { | |
background-color: var(--active-button); | |
} | |
.runner .snapshot-controls button:active { | |
background-color: var(--active-button); | |
color: var(--active-color); | |
} | |
.runner .snapshot-controls .snapshot-state-picker button.state-is-selected { | |
background-color: #666565; | |
color: yellow; | |
} | |
.runner .snapshot-controls button:hover { | |
background-color: var(--active-button); | |
color: var(--active-color); | |
} | |
.reporter .command-name-assert.command-state-passed .command-method span { | |
background-color: #045e45; | |
color: #17cf20; | |
} | |
.reporter ::-webkit-scrollbar-thumb { | |
background-color: var(--background); | |
} | |
.reporter ::-webkit-scrollbar-track { | |
background-color: var(--dark-background); | |
} | |
.reporter .command-state-failed > span > .command-wrapper { | |
background-color: var(--failed-command-background-color); | |
} | |
.reporter .command-state-failed > span > .command-wrapper:hover { | |
background-color: var(--failed-command-background-color); | |
} | |
.reporter .command-name-assert.command-state-failed .command-method span { | |
background-color: var(--state-failed-background-color); | |
color: var(--state-failed-color); | |
} | |
.reporter .runnable pre { | |
background-color: var(--background); | |
} | |
.reporter .runnable pre:hover { | |
background-color: var(--lighter-background); | |
} | |
.reporter pre { | |
border: var(--command-important-border); | |
} | |
.reporter .runnable-controls i { | |
color: var(--icons-color); | |
} | |
.reporter .runnable-controls i:hover { | |
color: var(--icons-hover-color); | |
} | |
.reporter | |
.runnable.suite.runnable-failed | |
> div | |
> .runnable-wrapper | |
.collapsible-more { | |
margin-left: 5px; | |
} | |
div#app > div { | |
background: var(--dark-background); | |
} | |
div.Pane.vertical.Pane1 > nav { | |
background: var(--dark-background); | |
color: white; | |
border: var(--button-border); | |
} | |
div.Pane.vertical.Pane1 > nav svg { | |
color: grey; | |
} | |
div.Pane.vertical.Pane2 { | |
border-color: var(--button-border) !important; | |
} | |
div.treeChild > span:hover { | |
background-color: transparent; | |
} | |
` | |
// NOTE: Hide XHR log .command-name-request, .command-name-xhr { display: none } | |
const ID = 'cypress-dark' | |
const { head } = parent.window.document | |
const darkCss = head.querySelector(`#${ID}`) | |
if (!darkCss) { | |
Cypress.$(head).append( | |
/* html */ `<style type="text/css" id="${ID}">${css}</style>`, | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Then import it.
Dark mode will be applied when run first test.