1560142 - Dark theme - improve contrast of strings in CodeMirror theme

Status: RESOLVED FIXED

(DevTools :: Shared Components, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: dark-console-string-color-update.png

In bug 1555570 we lowered the dark theme background colors a tiny bit to improve text-to-background contrast in Console.

We can improve the contrast of strings in CodeMirror (affecting console input/output, and Debugger) by making our current blue color a bit lighter:

.cm-s-mozilla .cm-string,
.cm-s-mozilla .cm-string-2,
.variable-or-property .token-string,
.CodeMirror-Tern-farg {
-  color: #6B89FF;
+  color: #709AFF;
}

It's a subtle change but I'm getting an improved "feel" from it, with the current color the blue seems to vibrate a bit and be lost in the background, and this looks more stable.

On the new --theme-body-background color, which is #232327, this improves our contrast ratio:

• #6B89FF on #232327: 4.95:1
• #709AFF on #232327: 5.78:1

We also discussed other options with :nchevobbe, including aligning colors of CodeMirror and Reps more, but that would be a big design effort and this is a nice mini-win.

Comment 1

[Florens Verschelde :fvsch]

I also tried Blue 40 (#45a1ff) which has a similar contrast ratio but it looks a bit less contrasted in practice, and doesn't looks like a good middle ground between the other purple and light-blue colors we use.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1560142 - Improve contrast of string color in dark theme; r=nchevobbe

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e8481c9b634d
Improve contrast of string color in dark theme; r=nchevobbe

Comment 4

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/e8481c9b634d