UI refresh: a modern light and dark theme #2114
Comments
|
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? |
|
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? |
|
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:
|
|
@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. |
|
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 🙂
|
|
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:
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. |
|
make sash width = 0? see https://bugs.eclipse.org/bugs/show_bug.cgi?id=562536 |
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. |
|
cc @PyvesB |
You'll need to pull and rebase my proposed change to do so: https://git.eclipse.org/r/c/platform/eclipse.platform.ui/+/170913 |
|
Thank you @thomasritter for this enhancements, in general I like it. I tried tonight's I-build on my Windows computer and found the following cases that don't look nice after the update:
In both cases it looks like the background of 'flat' buttons (haven't checked what they are exactly) don't fits to the overall background color anymore. Maybe this is because some assumptions about the background were made that are not true anymore or maybe something is missing in the updated theming. I also noticed that the Commit-Header in the History view (green box) is now in a light gray, while before it was the same white as the git-diff shown below (in my screenshot that part is empty since no file is selected for a better contrast). But with files being selected and after one gets used to it, that looks actually fine. |
|
Great job guys, I really enjoy this new dark mode!!! :) |
|
|
|
I feel like my Find/Replace Overlay should be adapted to the theme of the editor... I'll think about this |
If you like your widget to be CSS style-able you can read about it here. |
|
Thanks for trusting us on this and merging the first version 🙏 I went through the comments and started collecting all reported issues at the top of this issue. @vogella We will make work on the Linux themes a priority. However, I want to be transparent. We usually do not develop on Linux so it will take a little while to get @mvm-sap up and running on a Linux machine. |
|
I just found this plugin. Maybe you already knew it, maybe you didn't - anyways, I think it's cool and seems widely adopted |
|
@thomasritter for a quicker test of the Linux changes, remove the platform restrictions in the plugin.xml for the theme. This allows you to test it under windows. Not perfect as Linux is slightly different but this should allow you to move faster and Linux user can do the final testing. |
|
@vogella Thanks for the pointer. We will keep that in mind. One question: which distribution should we ideally use for dev&testing? Ubuntu? |
|
Ubuntu sounds good to me |
|
Fedora would be better, as Ubuntu is known to break GTK time to time. |
|
@thomasritter and @mvm-sap any news on the Linux update? Like I explained with my dev trick, you can use Windows to test and the Linux user community (that includes me) can do the final testing. |
As there can only be one active Part in the workbench at any time isn't the purpose of having one global |
|
@mvm-sap and @BeckerWdf maybe use another colour like gray as underline for the non active selected element? |
|
First of all thank you @mvm-sap, @thomasritter and @BeckerWdf for modernizing the Eclipse UI theming. I really appreciate your work on this in general and all the fixes you provided in the recent past and I'm convinced that it is for the better of Eclipse. But I'm not sure if the modernized (light) theming is ready to be the only one without any safety net. I therefore brought this topic up at today's developer call. @sratz and @soethoff already explained that maintaining multiple dark themes would be too much work, but that more than one light theme would be in general doable. |
|
FWIW, the new tabs are awful for me, it's harder to tell which one is selected. Baffling IMO. |
|
Thank you for the update! I like to see the gradients go away from the tabs on the light theme. (I had only added those because I wasn't able back then to have an empty part's background match the tab color.) |
|
In the current state this theming seems to have too many defects which can probably not be solved in-time before release. Therefore i suggest to not have it by default yet. It needs to be far better tested in all views and give other plugins a fair amount of time to adapt so it should only be made default in an M1. It should also not be named "modern" but "focused" theme - in some future it will not be modern anymore. |
|
I still think the new themes are looking great. |
* N&N for Theme Improvements Refers to eclipse-platform/eclipse.platform.ui#2114 Co-authored-by: Hannes Wellmann <[email protected]>
This is addressed in #2286 |
From my point of view the themes provided be Eclipse Platform are made for IDE use-cases and we now optimise them for these use-cases. If RCP applications don't use the editor area or their "main actors" are views this is a different story. There the requirements are different. If the platform themes are fitting for RCP apps this is fine and they can be used but if the platform themes are not fitting (e.g. because in your domain for some reasons all views have to have green background or whatever) then I propose to exactly do what you did: provide your own application specific theme(s). We can also discuss this on that topic via Zoom in Hannes's next community call on 26th of September at 4 pm CET. |
@HannesWell:
I don't see this with the today's version of the "Light (Preview)" theme. @HannesWell: Can you confirm that this is fixed? |
|
Hi all, 1. Icons design can be modernized. 
Some of the icons look bit outdated compared to other IDEs, how about we redesign some icons and also maintain same color or less vibrant colors similar to others. 2. Background color change is happening at an instant whenever we hover on tabs 
Hovering color change happens at an instant, if we smoothen ( include transition duration ) it would can give a smoother user experience 3. Slight decrease in border size |
about 3: Tried but failed |
|
In which release is the modernized dark theme available? |
|
@nlisker As far as I know (I am not involved with the it), development on a new modernized dark theme hasn't really started and there are plans to work on that once the Light theme is enabled by default/issues with it are sorted out. See also the October 2024 Community Call. |
|
I saw #2112, so I thought it got into 4.33, but the dark theme is unchanged there. Thanks for the link! |
It seems like these changes have been reverted in #2206 and according to the commit message, it seems like they might come back in 2024-12. |
I wouldn't say "failed", there is a functional patch with no known defects available, and the performance concern was never validated in practice. If someone was up for it, they could rebase it and tie the revised code only to the new preview theme. This would allow to gather more evidence on any hypothetical performance issues or defects, without imposing risks on all users. |
Yes that's fixed now. On first sight I just wondered if the breadcrumb should have a different background color than the editor, but actually it's clear that it's not part of the text to edit, so it also fine. Thank you for fixing that
Exactly. We had the impression it was not yet fully ready for prime-time for the September release. But the plan is to have it ready for the December release. See also #2114 (comment). |
|
Let's hope, that flat design is not outdated soon. The current flat design "period" somehow started 2012 with Windows 8 and Android 4 and now it looks like Microsoft is planning to introduce something called "fluent design": https://microsoft.design/articles/embracing-vibrant-universality-in-fluent-illustrations/
|
Thanks for the heads-up, that's interesting. But I have the impression that this looks somehow similar to the 3D icons from 20years ago, just in higher resolution and with more details. Probably fashion just repeats itself even in IT. |
Known issues
First version has been submitted. Here the list of already known issues we will work on.
--> Adding hover indicator for unselected tabs #2130
--> Fix for 'Git Staging' view background #2168
--> Fix for background color of some views like Types, Console etc #2153.
--> Revert in Reverting the bg color for StyledText, Button, Table controls #2181
--> Fix- Background color for gutter line in editor #2144
--> Light (Preview) theme: Change to bg color of vertical bar in editor #2314
--> Improvement to Light and Dark theme for Linux #2137
--> Removing unnecessary themeing extension for breadcrumb (light theme) eclipse-jdt/eclipse.jdt.ui#1577
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:
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:
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.
The text was updated successfully, but these errors were encountered: