Closed Bug 971418 Opened 6 years ago Closed 6 years ago

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

Categories

(DevTools :: General, defect)

defect
Not set

Tracking

(firefox29 verified, firefox30- verified)

VERIFIED FIXED
Firefox 30
Tracking Status
firefox29 --- verified
firefox30 - verified

People

(Reporter: alice0775, Assigned: bgrins)

References

Details

(Keywords: regression, ux-visual-hierarchy)

Attachments

(2 files, 3 obsolete files)

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

You should improve contrast between text and backgrpound.
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.
See Also: → 947242
Attached image dark-console-contrast.png (obsolete) —
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
Attachment #8374877 - Flags: ui-review?(dhenein)
Summary: Hard to read text in Browser Console etc → DevTools dark theme: use higher contrast text for main body content
OS: Windows 7 → All
Hardware: x86_64 → All
Version: 30 Branch → Trunk
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)
Attached patch dark-theme-colors.patch (obsolete) — Splinter Review
Patch with the new colors from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attachment #8383253 - Attachment is patch: true
Attachment #8383253 - Attachment mime type: text/x-patch → text/plain
Attached image new-colors-dark-theme.png (obsolete) —
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?
Attachment #8374877 - Attachment is obsolete: true
Attachment #8374877 - Flags: ui-review?(dhenein)
Attachment #8383258 - Flags: ui-review?(dhenein)
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
Attachment #8383253 - Flags: review?(fayearthur)
Blocks: 947242
Attachment #8383253 - Flags: review?(fayearthur) → review+
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 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+.
Attachment #8383258 - Flags: ui-review?(dhenein) → ui-review+
Attached image 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
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.
Attachment #8383253 - Attachment is obsolete: true
Attachment #8383258 - Attachment is obsolete: true
Attachment #8384698 - Flags: superreview+
Attachment #8384698 - Flags: review+
Attachment #8384698 - Flags: superreview+ → ui-review+
https://hg.mozilla.org/mozilla-central/rev/8beda5b285b5
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 30
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:
Attachment #8384698 - Flags: approval-mozilla-aurora?
Attachment #8384698 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Duplicate of this bug: 981129
Status: RESOLVED → VERIFIED
I agree, wayy too dark. this is a bad trend, doing for dark themes, I find lighter ones easier to read.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.