Sidebar is too dark, very hard to read and hurts my eyes

[luxalpa]

What would you like?

Either improve the contrast on the side bar, or add an option to use light mode (ideally preselected when the OS / browser is in light mode) or move the coloring of text and backgrounds into CSS variables so it can be customized from support.ts

Why is this needed?

Here on Elementary OS it is very difficult to read the text and some of the background highlights on the new side bar in Chromium. Everything else on my screen is in light mode.

Other

No response

[jennifer-shehane]

@luxalpa Thanks for sharing your feedback!

[ryanjwilke]

@luxalpa Would you be able to share a little more insight into which parts are hard to read? Also since you mentioned Elementary OS, is this something unique to this OS? It might be helpful to get a better understanding of which parts of that command log panel are currently hard to read as there may be some small adjustments we could make to improve contrast overall.

Thanks for any additional info you can provide.

[sbarba]

If you're testing a light page (very common) the contrast is just too much.

[luxalpa]

@ryanjwilke I mentioned Elementary OS because that's where I tested; I currently cannot test it on other OS. It may also depend on monitor, room brightness, etc.

I made a screenshot here:

The upper bits with the arrows are the texts that are very hard to read. The arrow at the bottom is for the background "highlight" that is supposed to highlight the steps in the test as well as the pinned one.

In addition to being very straining to read, it's also just generally straining on the eye and gives me after-images (like when looking into light that's too bright). It's mainly because the color is too dark, but it would really be preferable if the thing was using light mode (like how Cypress v9 looked like). It's basically a similar effect as when you are using dark mode everywhere and then get a page that's completely white. When looking at a bright screen in a bright room with light elements on the screen, the pupil narrows to let in less light, which in turn makes it much harder to differentiate between dark colors (in this regard the human eye works similar to a camera).

For comparison, the navigation bar in Slack works quite a lot better on my screen as it has larger (and thicker) text which is also brighter and has a much brighter background. VSCode, Obsidian and Discord have a real light mode which would be the ideal scenario.

[ryanjwilke]

Great. Thanks for the feedback everyone. It's helpful to have that extra context.

We have discussed for how we could support both a light and dark mode for the "command log" area in the future. That'd probably be ideal as a next step for this space. We've defaulted the design to be making use of a darker palette so that adds some separation between Cypress elements and the application that's being tested (which is likely white). Otherwise the two spaces can tend to compete with each other and contribute to the design feeling a little busier. All that said, we can recognize that some folks may have the preference to always use this space in more of a light mode setting.

Probably the most immediate fix that we can make is to increase the contrast of some of these elements so that things aren't quite as hard to read. Thanks again!

[khitrenovich]

The light mode is definitely a must here. Unfortunately, with my far-from-perfect vision I cannot read white on black - the black blurred for me, so the black background is blended into the white font up to the point I cannot distinguish between the letters. I know it's a bit messy of an explanation, it's hard to explain unless you actually see things this way... The lack of the light mode is practically a blocker for me.

[sbarba]

It may look cool, but it puts more strain on the eyes and from this article:

"People with astigmatism (approximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye."

[gtarsia]

@ryanjwilke is there a workaround for this in the meantime?

[ryanjwilke]

@gtarsia Not at the moment, no. We can keep everyone updated on this thread as soon as we have a solution in place. We're still actively working on the designs for the command log space, so this is something that we will try to take into account as we finish that design work.

Thanks for being patient as we figure out the best way to solve all this.

[marktnoonan]

A couple of us created a plugin workaround for the time being: https://github.com/marktnoonan/cypress-light-theme - this will follow your system preference for light/dark, or let you override with a THEME Cypress environment variable.

I decided to approach this as a plugin that sits on top of Cypress, instead of a core feature of the product, to save time on getting something out there. The considerations of an in-product theme selection option are actually pretty involved and will take some time to sort out. There are design questions and also some front-end architecture-type questions when adding themes to a system that is not already set up for them.

So, we don't want to rush changes into the product, but I agree with all the points made about having the option of light mode required for readability by some people and in certain situations like bright sunlight. Similarly I was happy about the plugin that used to put the Command Log in dark mode before Cypress 10, people have always wanted both.

@sbarba thanks for the reading material on astigmatism. I have seen some simulations of this with light text on a black background and it is definitely an issue. @gtarsia @khitrenovich @luxalpa let me know your thoughts on the plugin approach. If you see any problems with it please log them on the cypress-light-theme repo.

Thanks again to everybody for taking the time to share your feedback.

[MaxAllianov]

I found a solution by installing the stylebot expansion to my Chrome browser. I have manually changed the colors so they look like vanilla cypress. For a lazy ones here are my stylebot settings:

`nav.space-y-1.bg-gray-1000.flex-1 { color: #5b0f00; }

bg-gray-1000 { color: #fff2cc; }

.bg-gray-1000 { --tw-bg-opacity: 1 !important; background-color: rgb(238 238 239) !important; }

.text-indigo-300 { --tw-text-opacity: 1 !important; color: #004cc4 !important; FONT-WEIGHT: BOLD; }

.text-gray-500 { --tw-text-opacity: 1 !important; color: rgb(72 72 72) !important; }

.text-gray-50 { --tw-text-opacity: 1 !important; color: rgb(72 72 72) !important; }

.reporter .container { background-color: #d4d7df; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; overflow-y: auto; }

.reporter .runnable-header { background: #e2e3e7; display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 24px; overflow-wrap: break-word; padding: 16px; position: sticky; top: 0; width: 100%; z-index: 1; } .reporter strong { color: #646567; font-weight: bold; } .reporter header { background-color: #fafafa; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; min-height: 64px; outline: 0; overflow: hidden; padding: 20px 16px; width: 100%; z-index: 1; } .reporter .toggle-specs-wrapper button .toggle-specs-text { color: #010208; -webkit-transition: color 150ms ease-out; transition: color 150ms ease-out; FONT-WEIGHT: BOLDER; } .reporter .runnable { width: 100%; color: #303030; background-color: #ffffff; overflow: auto; line-height: 18px; padding-left: 0; } .reporter .hooks-container .hook-header .collapsible-header { text-transform: uppercase; color: #000000; display: inline-block; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; font-size: 11px; cursor: pointer; padding: 4px 0; } .reporter .command-state-pending { border-left: 2px solid #ffffff; background-color: #ffffff; cursor: default; color: #000000; FONT-WEIGHT: BOLDER; } .reporter .runnable-err { border-left: 2px solid #e45770; background-color: #ffffff; clear: both; color: #ff234a; font-weight: bolder; margin-bottom: 0; margin-top: 5px; white-space: pre-wrap; word-break: break-word; -webkit-user-select: initial; -moz-user-select: initial; -ms-user-select: initial; user-select: initial; overflow: auto; } .reporter .runnable-err-header { background-color: rgb(239 45 80 / 19%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 5px 10px; font-weight: bold; } .reporter .runnable-err-header .runnable-err-name { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; font-size: 13px; line-height: 22px; color: #ee2546; } .reporter .runnable-err-stack-expander .runnable-err-print div { color: #ff002a; cursor: pointer; font-size: 14px; font-weight: 500; height: 100%; padding: 14px 10px; width: 100%; } .reporter .command-state-passed .command-message { color: #5c5c5c; } .reporter .command-state-passed { border-left: 2px solid #0b610f; border-bottom: 1px solid #b2b2b2; } .reporter .command-wrapper { border-left: 2px solid #171926; background-color: #e9e9e9; color: #666667; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 28px; padding-right: 2px; } .reporter .command-state-passed:not(.command-is-event) .command-method { color: #000000; font-weight: bolder; } .reporter .command-state-failed .command-number-column, .reporter .command-state-failed .command-method, .reporter .command-state-failed .command-message { color: #ff002a; } .force-dark { color-scheme: auto; } .reporter .no-commands { background-color: #e9e9e9; border: 1px solid #8e8e8e; border-radius: 3px; -webkit-box-shadow: inset 0 1px 1px rgb(255 255 255 / 5%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 5%); min-height: 28px; padding: 9px; } .reporter .runnable.suite > div > .runnable-wrapper .runnable-title { color: #000000; font-size: 13px; font-weight: bolder; } .collapsible-header-wrapper:hover{ background-color: #e9e9e9; } .reporter .runnable-wrapper > .collapsible-header:hover{ background-color: #e9e9e9; } .reporter .instruments-container .instrument-content { background-color: #e9e9e9; border-left: 1px solid #171926; border-radius: 0 3px 3px; border-right: 1px solid #171926; margin-bottom: 10px; overflow: auto; padding: 3px 10px; } .reporter header button:hover { background-color: #e2e3e8; } .collapsible-header-inner:hover{ background-color: #e2e3e8; } .reporter .stats li .num { color: black; line-height: 12px; vertical-align: text-top; width: 16px; display: inline-block; text-align: center; } .reporter .command-wrapper:hover { min-height: 28px; background-color: #cccccc} .reporter .command-is-pinned{ background-color: #cccccc } .reporter .num-children, .reporter .num-elements { background-color: #c3c3c3; border-radius: 4px; color: black; display: inline-block; font-family: "Fira Mono", "Helvetica Neue", "Arial", sans-serif; font-style: normal; font-size: 11px; font-weight: bold; line-height: 1.5; padding: 0px 5px !important; vertical-align: text-top; } .reporter .runnable-loading .runnable-loading-title { font-family: "Fira Mono", "Helvetica Neue", "Arial", sans-serif; font-size: 20px; text-align: center; color: #828283; } .reporter .command-state-pending + .command-progress span { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-name: progress-bar; animation-name: progress-bar; -webkit-animation-timing-function: linear; animation-timing-function: linear; background: #fafafa; display: block; float: right; height: 100%; -webkit-transform-origin: right; transform-origin: right; width: 100%; } .reporter .test-err-code-frame .runnable-err-file-path { background: rgb(213 213 213); border-top-left-radius: 4px; border-top-right-radius: 4px; display: block; font-size: 14px; line-height: 16px; padding: 8px; word-break: break-all; } :not(pre) > code[class=language-], pre[class=language-] { background: #dcdcdc; } code[class=language-], pre[class=language-] { color: #247ea7; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.regex, .token.important, .token.variable { color: #db7903; background: #dcdcdc; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6a9955; } code[class=language-], pre[class=language-] { color: black; background: none; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.regex, .token.important, .token.variable { color: #db7903 !important; background: #ffffff !important; } .reporter strong { color: #0500ff !important; font-weight: bolder !important; font-size: 13px; } .reporter .command-state-passed:not(.command-is-event) .command-method { color: #000000 !important; font-weight: bolder !important; font-size: 13px; } .text-gray-400 { --tw-text-opacity: 1 !important; color: rgb(5 51 202) !important; } .v-popper v-popper--theme-tooltip v-popper--shown v-popper--theme-tooltip{background-color: #e2e3e7;} .reporter .test-err-code-frame { background-color: #f6f6f6; border: 1px solid rgba(228, 87, 112, 0.25); border-radius: 4px; margin: 0 10px 10px; }

code[class=language-], pre[class=language-] { color: #0857ff; margin: 0; / text-shadow: black 0px 1px; / } .reporter .runnable-err-message code { background-color: rgb(237 237 237); border-radius: 4px; color: #c40020; padding: 2px 5px; } .token.atrule, .token.attr-value, .token.keyword, .token.function, .token.class-name { color: #9a9a0c; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #e86900; }`