UI refresh: a modern light and dark theme

[thomasritter]

Known issues

First version has been submitted. Here the list of already known issues we will work on.

• Headers do not react to hovering events anymore. Add hover indicator. ( Dark, Light -> Win, Mac)
  --> Adding hover indicator for unselected tabs #2130
• “Git Staging” view does not have a grey background. This makes the grey buttons standout. Background should be grey. (Light -> Win, Mac)
  --> Fix for 'Git Staging' view background #2168
• "Types" view does not have a grey background
  --> Fix for background color of some views like Types, Console etc #2153.
  --> Revert in Reverting the bg color for StyledText, Button, Table controls #2181
• Editor line number strip should have the same color as the editor background. (Dark -> Win, Mac)
  --> [Dark Theme]Fix for background color of gutter line in editor #2744
• Editor line number strip should have the same color as the editor background. (Light -> Win, Mac)
  --> Light (Preview) theme: Change to bg color of vertical bar in editor #2314
• Provide same themes for Linux (Dark, Light)
  --> Improvement to Light and Dark theme for Linux #2137
• Issue in breadcrumb
  --> Removing unnecessary themeing extension for breadcrumb (light theme) eclipse-jdt/eclipse.jdt.ui#1577
• Missing alternate row colors in tables on macOS Recent changes to UI Themes have broken Table rendering on Mac #2171)
• Missing alternate row colors in trees on macOS [MAC] - Light(Preview) theme - Fix for missing alternate row colors for Tree  #2404
• Editor Tabs looks greyed out --> Light (Preview) Font color change for text in tabs #2294
• Multiple Tabs have blue highlight --> Light (Preview) theme - change in the behavior of highlights for selected tabs #2286
• Labels in Progress View have wrong background
• Move changes to "Light (Preview)" to "Light" theme and delete "Light (Preview)" theme. --> Move "Light (Preview)" Theme to the "Light" Theme #2549
• Fix bread crumb for light theme --> [Light Theme]Fix for background color of bread-crumb in debug view eclipse.platform#1704
• Fix bread crumb for dark theme --> [Dark Theme]Fix for background color of bread crumbs in Debug view eclipse.platform#1706

Status quo

A lot of Eclipse users are asking for a more modern look&feel. If you search the internet you will find a lot of such posts.

https://www.reddit.com/r/eclipse/comments/i4hlpw/make_eclipse_look_modern/
https://www.reddit.com/r/eclipse/comments/jvfyv8/will_eclipse_get_amajor_ui_upgrade_to_look_modern/
...

There is quite some progress in this area with simplified tab view options (available), sticky scrolling (in progress), modernized find integration (in progress) and many other small and bigger fixes which are currently being worked on in the Eclipse community.

This issue focuses on the default themes. The default light theme has not been updated in years. It is not state of the art anymore. All major IDEs have shifted to a different light theme style. Here is an overview how the other most commonly used IDEs look like out of the box.

VS Code

IntelliJ

Visual Studio

XCode

What design styles follows a theme in 2024?

When comparing the different IDEs it is easy to pick out the design decisions they all share. These are:

1. Lightweight view tab design.
2. Flat look. No use of 3D gradiants.
3. Views use a darker background color. This naturally focuses the eye on the editor area which is where most of the work happens. We like to call editors the main actors and views the supporting actors.

Especially, point 3) is important. When looking at other UIs outside the IDE space it becomes clear that this is the standard. The navigation sidebar is usually using a darker background color than the main content area (e.g. MacOS finder, Apple Music, Powerpoint, OneNote, MacOS notes, MS teams, ...). That's probably the biggest reason why Eclipse feels so outdated.

Proposal for the updated default light theme

The updated theme addresses all three points mentioned above. Here are some before/after screenshots.

Current theme:

Modernized theme:

Details
Views tabs. Same minimalist design you can find in the other IDEs.

Editor tabs. Same design as in the other IDEs. The active tab has a white background which blends in nicely with the white background of the editor area.

Proposal for the updated dark theme

The updated theme follows in the footsteps of the light theme. From a design perspective it simply inverts the colors. This means the most important part is the darkest and the less important parts are brighter. When working on the dark theme we noticed that it was already in a much better shape. Our proposal simply cleans up same aspects of the current design.

Here is a screenshot of the IntelliJ dark theme as a reference.

Current theme:

Modernized theme:

Summary

We have been working hard on these proposals and were pleasantly surprised how good Eclipse can look like with the updated themes. Our in house developers have been using them already for months and do not want to go back to the old ones. While we tested them extensively there is still a chance that we missed some small details. Please report any issues you find and we will look into them. We decided to split the changes into three changes for easier review:

• One for the light theme: Improvement to the existing Light Theme #2103
• One for the dark theme: Improvement to the existing dark theme #2112
• One to adjust the thickness of the highlight underline of active tabs. We propose to reduce it by one pixel: Height reduction of highlight #2111

At the Eclipse Community Day we asked whether to immediately replace the existing themes or add them as new ones. All committers (@merks , @HeikoKlare , @marcushoepfner , @BeckerWdf , @HannesWell , @sratz , @fedejeanne ) we talked to asked us to replace the existing themes. We can always rollback the changes if there are issues.

As a final note, we focused on Windows and Mac first. This is already a lot of work. If these changes get accepted we will also look into applying the visual refresh to the Linux themes.

[Wittmaxi]

I love this change! Having see the difference it can make, I can not wait for this to be in my IDE. Thank you!!!

I might be alone with this opinion, but to me the new theme looks almost unchanged and I feel like a bigger contrast might look even better. From your presentation I know that you copied the values of VScode but to me, the light theme looks nearly unchanged. Have you experimented with "greater contrasts" already?

[laeubi]

It might be my glasses but with the "modern" style I can hardly read Main class + method names ... and even if it says "Please ignore the incorrect syntax highlighting. It does not occur with the change." I wonder, why not make a screenshot with correct syntax highlight?

[HeikoKlare]

I really like and appreciate these changes and consider them a great improvement in terms of look&feel 👍 I hope that we can find an agreement soon and have them available as soon as possible.

I have two concerns so far:

1. I agree with Christoph that having a proper dark theme screenshot with the correct syntax highlighting would be good.
2. I am not sure about the view tab changes when using the classic dense tab style with icons instead of the newer one without icons. While I like this change with the new tab header styling (aligned with, e.g., VS Code), with the classic one they don't really feel like headers to me anymore. In addition, the headers do not react to hovering events anymore, like they did before, which makes it more difficult to understand them as tab headers. At least the latter is probably a bug and not intended.
   

[thomasritter]

@laeubi Your comment applies to #2112, correct? Sorry, for that one. Matthias Becker told us that the syntax highlighting colors are linked to a theme ID and if you change the ID they break. This is what you can see in the screenshot because we duplicated the theme while working on it. Now, with #2112 we thought it would not be a problem because we change the existing theme and no ID breakage should happen. But it turns out that we were wrong and somehow the editor is picking the light theme syntax colors and not the one for the dark theme. We are investigating this, right now. Of course, in this state the change for the dark theme cannot be submitted.

[thomasritter]

I updated the screenshot of the new dark theme. It features the correct syntax highlighting, now.

[HeikoKlare]

I updated the screenshot of the new dark theme. It features the correct syntax highlighting, now.

Thank you! The screenshot shows the new dark theme also with a changed font color theme. I don't see that as part of the current dark theme improvement PR. Will you provide it later on? When I test the PR, I still have the existing "christmas tree" font colors in dark theme, so I would really appreciate an update of them as well 🙂

[vogella]

I also like the changes, tested under Windows. They are not ground-breaking but do the little twists to make the theme look more professional.

In my opinion our styling also suffers from:

• Old styling icons, if you check the above non Eclipse tools they all moved to less colorful icons
• Color errors in the toolbar and toolbar icons, see for example the perspective button in the dark theme which is light or the toolbar background in the Outline view

• Mis-aligned icons, the center of multiple icons is different, for example the center of the "Run external tool" button icon is higher than the "Run button". Put a lineal on the toolbar bottom or top to see what I mean

None of the above is related to this change but I wanted to mention it, now that more people work on the theming.

I merge the changes so that we can polish these changes with the help of more eyes (and also to get the promised Linux change cc @thomasritter)

For reference on my styling background I introduced the dark theme in Eclipse and updated the Windows theme to be less Win95 (removed the gradients) among other changes in the CSS. I also introduced the pseudo-class support for preference styling to help @BeckerWdf with his initial dark theme of the ABAP tooling.

[humphreygao]

make sash width = 0? see https://bugs.eclipse.org/bugs/show_bug.cgi?id=562536

[vogella]

#2112 and #2103 merged

[vogella]

make sash width = 0?

Can you test and create before and after screenshot with new Eclipse? Your closing X for the view proves that you are using a super old version. IIRC the sash zero did not make a difference in past.

[vogella]

cc @PyvesB