971418 - DevTools dark theme: use higher contrast text for main body content

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[Alice0775 White]

Now Dark theme is by default, but Hard to read text in Dark theme.

You should improve contrast between text and backgrpound.

Comment 1

[Brian Grinstead [:bgrins]]

I'm assuming this is referring to the main light text for main content, like that of the console.  We do have bug 947242 for switching the accent colors for things like the markup view and syntax highlighted text in the code editor.

Comment 2

[Brian Grinstead [:bgrins]]

Attachment: dark-console-contrast.png

Darrin, here is a comparison of two different text colors from the dark theme palette:

Top (changed) - Content (Text) - Light: #b8c8d9 
Bottom (current) - Content (Text) - Grey: #8fa1b2

Any thoughts?  There is an ongoing try build which will allow binary downloads: https://tbpl.mozilla.org/?tree=Try&rev=608cb5582452

Comment 3

[Brian Grinstead [:bgrins]]

We should probably go ahead and update the background color to match the new theme colors while we are at it):

Background color: #14171a (currently #131c26)
Foreground color:  #b8c8d9 or #b6babf (currently #8fa1b2)

Comment 4

[Brian Grinstead [:bgrins]]

Attachment: dark-theme-colors.patch

Patch with the new colors from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors

Comment 5

[Brian Grinstead [:bgrins]]

Attachment: new-colors-dark-theme.png

Darrin, here is a screenshot with the patch applied of inspector and console.  It changes the colors as such:

Background main content: From #131c26 to #14171a
Foreground main Content: From #8fa1b2 to #b8c8d9

Background sidebar content: From #131c26 to #181d20
Foreground sidebar Content: From #8fa1b2 to #b8c8d9

Does this look good?

Comment 6

[Brian Grinstead [:bgrins]]

Comment on attachment 8383253 [details] [diff] [review]
dark-theme-colors.patch

This patch is just changing some CSS values to match the new theme colors

Comment 7

[Benjamin Kerensa [:bkerensa]]

I'm happy with the progress on this bug I don't think this is critical enough for tracking especially with the progress on it. Thanks!

Comment 8

[Brian Grinstead [:bgrins]]

Also Darrin, a build with the same code that I used to grab attachment 8383258 [details] can be grabbed from: https://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-04dbe5969016/try-macosx64-debug/

Comment 9

[Darrin Henein [:darrin]]

Comment on attachment 8383258 [details]
new-colors-dark-theme.png

Just looked at this with shorlander and we thought it was a bit bright, and text that is too light on a dark background can be straining to read. Can we go with a middle ground of say #A9BACB? Brighter than what we have but still a bit less glaring than in that screenshot/build. If so, r+.

Comment 10

[Brian Grinstead [:bgrins]]

Attachment: contrast-report.png

#A9BACB on #14171a seems to pass the AAA compliance for any font size, so that should be fine.

I will go ahead and also update the wiki (https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors) to replace Foreground Text (grey)  with the new color

Comment 11

[Brian Grinstead [:bgrins]]

Attachment: dark-theme-colors.patch

Dark theme changes: replaces #b8c8d9 with #a9bacb globally.  Sets main body and sidebar text color to #a9bacb.  Sets main background to #14171a and sidebar background to #181d20 to match colors from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.

Comment 12

[Brian Grinstead [:bgrins]]

https://hg.mozilla.org/integration/fx-team/rev/8beda5b285b5
https://tbpl.mozilla.org/?tree=Fx-Team&rev=8beda5b285b5

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/8beda5b285b5

Comment 14

[Brian Grinstead [:bgrins]]

Comment on attachment 8384698 [details] [diff] [review]
dark-theme-colors.patch

[Approval Request Comment]
Bug caused by (feature/regressing bug #): 966308
User impact if declined: The default DevTools theme will not have enough contrast between the text and background colors
Testing completed (on m-c, etc.): on m-c since 3-3-2014
Risk to taking this patch (and alternatives if risky): Low risk - styling change to DevTools
String or IDL/UUID changes made by this patch:

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/26df27229bca

Comment 17

[Jim Michaels]

I agree, wayy too dark. this is a bad trend, doing for dark themes, I find lighter ones easier to read.