Align dark theme form chrome with regular view styling#3949
Merged
Conversation
The dark theme rendered the form heading and section title bars indistinguishably from the form body, and editor-form text contrast was noticeably worse than the dialog labels (eclipse-platform#3945). Bring the dark theme form chrome in line with the existing ".MPart Composite" / ".MPart Section" view styling and with dialog label contrast: - e4-dark_globalstyle.css: split the joint "Form, FormHeading" rule. Use #2F2F2F for both Form and FormHeading background-color (and the Form's text-background-color), matching the ".MPart Composite" body color used in views, and use #f4f7f7 for the FormHeading foreground for near-white dialog-level contrast. Drop the "swt-background-mode: 'force'" hack on Form: it forced FormHeading children to inherit Form's body color, which is what required a counter-override in the partstyle. The light theme has never set this and works fine with INHERIT_DEFAULT. - e4-dark_partstyle.css: remove the ".MPart FormHeading > ..." block. It was only needed to undo the FORCE inheritance and to hard-code #505f70 on the heading; with FORCE gone and the heading colors set in globalstyle, the block is redundant. - e4-dark_win.css: change the Windows-specific ".MPart Form" block from #4f5355 to #2F2F2F so Form widgets on Windows align with the rest of the dark theme body color. With these changes the previous editor-only override block (".Editor Form Composite, .Editor Form Composite Tree, .MPartStack.active .Editor Form Composite Tree { #1E1F22 }") in e4-dark_{linux,mac,win}.css is no longer needed: ".MPart Composite" already sets the form body to #2F2F2F, ".MPart Form Section Tree" sets the section trees to #313538, and FormHeading is matched directly by the FormHeading selector in globalstyle. Removing the override also makes editor section trees match view section trees, which the broad rule was inadvertently flattening.
Contributor
Author
|
Linux Old: 
Linux New: 
Planning to test on Windows in the near future |
Contributor
Member
|
@vogella: Which are the areas to look at most? Maybe you can mark them on your screenshots. |
Contributor
Author
Basically everything is different (background color, no wrong background color of buttons, tab header) |
Contributor
Author
|
Here are a few "broken" things in the old theme, in addition the old colors are inconsistent with the other colors from the dark theme. 
|
Contributor
Author
|
Windows old: 
Windows neu: 
Looks basically like the Linux one, so no extra screenshot. Target editor has a white artifacts but this is unrelated to this change, was before the same. 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
On the dark theme, the form heading and section title bars were collapsing into the form body in editors and the editor-form text contrast was visibly worse than the dialog labels. The cause was a chain of overrides built on top of an INHERIT_FORCE hack on
Formthat forced children to inherit the body color, which the form heading then had to fight against ine4-dark_partstyle.css, and a broad.Editor Form Composite { #1E1F22 }rule that pushed the editor body away from the view body color and incidentally flattened the section trees.This change unifies the dark theme form chrome with the existing
.MPart Composite/.MPart Sectionview styling: splitForm/FormHeadingine4-dark_globalstyle.cssto#2F2F2Fbody /#f4f7f7heading text, drop theswt-background-mode: 'force'hack, drop the now-unneeded.MPart FormHeading > ...counter-override ine4-dark_partstyle.css, align the Windows-specific.MPart Form { #4f5355 }block to#2F2F2F, and remove the redundant.Editor Form Compositeblock from the three platform-specific dark files. Net diff is +9 / -49 lines.