Bug 551707 - [Dark theme] Use the same colors consistently
Summary: [Dark theme] Use the same colors consistently
Status: RESOLVED FIXED
Alias: None
Product: Platform
Classification: Eclipse Project
Component: UI (show other bugs)
Version: 4.13   Edit
Hardware: PC All
: P3 normal (vote)
Target Milestone: 4.14 M3   Edit
Assignee: Lars Vogel CLA
QA Contact:
URL:
Whiteboard:
Keywords: noteworthy
Depends on: 552368 552404 552405 552406 553242
Blocks: 551494 552780
  Show dependency tree
 
Reported: 2019-10-02 10:25 EDT by Lars Vogel CLA
Modified: 2019-12-02 04:37 EST (History)
6 users (show)

See Also:


Attachments
Tree and table (176.22 KB, image/png)
2019-10-18 10:51 EDT, Lars Vogel CLA
no flags Details
Another example using the Launch configuration old is on the left, new is on the right (234.49 KB, image/png)
2019-10-18 12:36 EDT, Lars Vogel CLA
no flags Details
Views having different background colors (54.51 KB, image/png)
2019-10-18 12:40 EDT, Lars Vogel CLA
no flags Details
without 2e0644a9c8 (389.97 KB, image/png)
2019-10-24 02:40 EDT, Till Brychcy CLA
no flags Details
with 2e0644a9c8 (399.00 KB, image/png)
2019-10-24 02:40 EDT, Till Brychcy CLA
no flags Details
Comparison Windows (263.86 KB, image/png)
2019-11-06 07:50 EST, Benedikt Kuntz CLA
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Lars Vogel CLA 2019-10-02 10:25:08 EDT
Not sure why but the current dark theme uses a lot of slightly different colors for its widgets.

This makes the UI looks overloaded. Compare this with VScode which looks much better because it uses only a few colors.

The majority of the widgets uses the following setting,  I suggest we try to move more widgets to this setting:

 background-color:#515658;
    color:#eeeeee;
Comment 1 Eclipse Genie CLA 2019-10-02 10:31:56 EDT
New Gerrit change created: https://git.eclipse.org/r/150497
Comment 3 Eclipse Genie CLA 2019-10-18 10:44:12 EDT
New Gerrit change created: https://git.eclipse.org/r/151313
Comment 4 Lars Vogel CLA 2019-10-18 10:51:07 EDT
Created attachment 280332 [details]
Tree and table

Result if we use the same color for trees and tables.
Comment 5 Lars Vogel CLA 2019-10-18 10:51:54 EDT
I also suggest to use the same colors as we use for all widgets for trees and tables, see screenshot.
Comment 6 Eclipse Genie CLA 2019-10-18 10:52:53 EDT
New Gerrit change created: https://git.eclipse.org/r/151315
Comment 7 Matthias Becker CLA 2019-10-18 12:23:30 EDT
(In reply to Lars Vogel from comment #4)
> Created attachment 280332 [details]
> Tree and table
> 
> Result if we use the same color for trees and tables.

left is old, right is new?
Comment 8 Lars Vogel CLA 2019-10-18 12:28:25 EDT
(In reply to Matthias Becker from comment #7)
> (In reply to Lars Vogel from comment #4)
> left is old, right is new?

Yes.
Comment 9 Lars Vogel CLA 2019-10-18 12:36:00 EDT
Created attachment 280339 [details]
Another example using the Launch configuration old is on the left, new is on the right
Comment 10 Lars Vogel CLA 2019-10-18 12:40:43 EDT
Created attachment 280340 [details]
Views having different background colors

Another example for inconsistent usage of colors, in the attached examples I have several empty views open and IMHO all should use the same background color but we we different "grays" being used.
Comment 11 Benedikt Kuntz CLA 2019-10-20 05:33:05 EDT
+1, no more 50 shades of grey ;)
Comment 13 Eclipse Genie CLA 2019-10-24 02:01:16 EDT
New Gerrit change created: https://git.eclipse.org/r/151506
Comment 14 Till Brychcy CLA 2019-10-24 02:38:49 EDT
While really I appreciate your work on this, I must say that commit 2e0644a9c831cf46ccc5e3f6f25ad349e7b69da0 is not a good idea on the mac.

The package explorer etc. now have background that is much brighter than the editor, making it harder to read and it looks like there are MORE not less differently colors areas.

I'll attach screen shots.
Comment 15 Lars Vogel CLA 2019-10-24 02:40:23 EDT
(In reply to Till Brychcy from comment #14)
> While really I appreciate your work on this, I must say that commit
> 2e0644a9c831cf46ccc5e3f6f25ad349e7b69da0 is not a good idea on the mac.
> 
> The package explorer etc. now have background that is much brighter than the
> editor, making it harder to read and it looks like there are MORE not less
> differently colors areas.
> 
> I'll attach screen shots.

Thanks.
Comment 16 Till Brychcy CLA 2019-10-24 02:40:37 EDT
Created attachment 280400 [details]
without 2e0644a9c8
Comment 17 Till Brychcy CLA 2019-10-24 02:40:55 EDT
Created attachment 280401 [details]
with 2e0644a9c8
Comment 18 Lars Vogel CLA 2019-10-24 02:52:57 EDT
Till, are you available to investigate why this looks bad on Mac but good on Linux? 

I could revert 2e0644a9c8 (and make Linux uglier again) or add the tree specific styling only to the Mac which I also think is a not optimal solution, as it effectively decouples dark styling changes between the different OS. With Mac access I cannot investigate myself.
Comment 19 Lars Vogel CLA 2019-10-24 03:02:36 EDT
Looks like we do have a lot of redundancy in dark styling in the OSS specific css files. Open Bug 552368 to factor them out.
Comment 20 Eclipse Genie CLA 2019-10-25 04:38:17 EDT
New Gerrit change created: https://git.eclipse.org/r/151590
Comment 21 Eclipse Genie CLA 2019-10-28 15:47:36 EDT
New Gerrit change created: https://git.eclipse.org/r/151717
Comment 23 Till Brychcy CLA 2019-11-06 02:50:24 EST
(In reply to Lars Vogel from comment #18)
> Till, are you available to investigate why this looks bad on Mac but good on
> Linux? 
> 
> I could revert 2e0644a9c8 (and make Linux uglier again) or add the tree
> specific styling only to the Mac which I also think is a not optimal
> solution, as it effectively decouples dark styling changes between the
> different OS. With Mac access I cannot investigate myself.

The color comes from the rule 

Tree,
RegistryFilteredTree {
    background-color:#515658;
    color:#eeeeee;
}

#515658 is pretty bright and not a good background color for editors (and the trees in package explorer etc. should match the editors).

I wonder how this is NOT broken on linux?
Comment 24 Till Brychcy CLA 2019-11-06 02:59:26 EST
Btw. the patch for bug 552691 has changed the background for editors to the same gray. The master is currently completely unusable for me.

I guess it was pretty optimistic of you to change all this without testing on all platforms.

Maybe it would be better to roll back all dark mode css changes until you have access to a mac or at least a tester with a mac (I currently don't have time to work on this.)
Comment 25 Lars Vogel CLA 2019-11-06 03:22:33 EST
(In reply to Till Brychcy from comment #24)
> Btw. the patch for bug 552691 has changed the background for editors to the
> same gray. The master is currently completely unusable for me.
> 
> I guess it was pretty optimistic of you to change all this without testing
> on all platforms.
> 
> Maybe it would be better to roll back all dark mode css changes until you
> have access to a mac or at least a tester with a mac (I currently don't have
> time to work on this.)

Matthias helps with testing in Mac, unfortunately I did not involve him for Bug 552691.
Comment 26 Lars Vogel CLA 2019-11-06 05:30:22 EST
(In reply to Till Brychcy from comment #23)

> I wonder how this is NOT broken on linux?

Looks like e4-dark.css contains special Linux styling for Trees and Canvas. If I remove that, I also have light Explorer and Outline view.  I push a Gerrit soon.
Comment 27 Eclipse Genie CLA 2019-11-06 05:33:02 EST
New Gerrit change created: https://git.eclipse.org/r/152129
Comment 28 Benedikt Kuntz CLA 2019-11-06 07:50:50 EST
Created attachment 280525 [details]
Comparison Windows

(In reply to Eclipse Genie from comment #27)
> New Gerrit change created: https://git.eclipse.org/r/152129

Comparison on Windows, no visible difference for me...
Comment 30 Lars Vogel CLA 2019-11-07 02:09:22 EST
Till, please reopen if parts on Mac still look worse. For the remaining cleanup work in the dark theme I will use dedicated bugs.
Comment 31 Lakshmi P Shanmugam CLA 2019-11-20 01:49:43 EST
(In reply to Lars Vogel from comment #30)
> Till, please reopen if parts on Mac still look worse. For the remaining
> cleanup work in the dark theme I will use dedicated bugs.

Please see https://bugs.eclipse.org/bugs/show_bug.cgi?id=553242 for problems on Mac.
Comment 32 Lakshmi P Shanmugam CLA 2019-12-02 04:37:15 EST
@Lars,
Can you please update the 'New' image in the N&N entry - https://www.eclipse.org/eclipse/news/4.14/platform.php#dark-colors-usage.