Closed Bug 971418 Opened 6 years ago Closed 6 years ago
Tools dark theme: use higher contrast text for main body content
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
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
Summary: Hard to read text in Browser Console etc → DevTools dark theme: use higher contrast text for main body content
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)
Patch with the new colors from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
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 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)
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!
Also Darrin, a build with the same code that I used to grab attachment 8383258 [details] can be grabbed from: https://email@example.com/try-macosx64-debug/
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+
#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 #8384698 - Flags: superreview+ → ui-review+
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
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+
I agree, wayy too dark. this is a bad trend, doing for dark themes, I find lighter ones easier to read.
You need to log in before you can comment on or make changes to this bug.