Closed Bug 1560142 Opened 1 year ago Closed 1 year ago

Dark theme - improve contrast of strings in CodeMirror theme

Categories

(DevTools :: CSS and Themes, enhancement)

enhancement
Not set
normal

Tracking

(firefox69 fixed)

RESOLVED FIXED
Firefox 69
Tracking Status
firefox69 --- fixed

People

(Reporter: fvsch, Assigned: fvsch)

Details

Attachments

(2 files)

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.

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.

Assignee: nobody → florens
Status: NEW → ASSIGNED
Type: defect → enhancement
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e8481c9b634d
Improve contrast of string color in dark theme; r=nchevobbe
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 69
You need to log in before you can comment on or make changes to this bug.