days
-1
-6
hours
-1
-4
minutes
-3
-1
seconds
0
-3
search
Darker than dark

Dark theme in Eclipse Photon

Lars Vogel
MicroProfile
© Shutterstock / Sadovski

You want it darker? Eclipse Photon ships the best support for the dark theme so far! Lars Vogel explains all the new dark theme improvements in the platform as well as how plug-in developers can make sure their contributions work for the dark theme.

A few years ago, in 2014, Eclipse IDE announced that it will ship a default dark theme. In 2014, many of restrictions existed in the CSS and SWT styling of the Eclipse workspace and the result was not very usable. But the Eclipse platform team wanted to lay the foundation for improvements without the requirement to install external components to test and to drive these improvements. The releases following the initial release constantly improved the capabilities of the underlying CSS engine and the SWT toolkit to enhance the user experience.

With Eclipse Photon, we are shipping the best support for the dark theme so far. Continue to read to learn about the improvements in the platform and in the second part, how plug-in developers can enable their Eclipse contributions for the dark theme.

Try it out

Someone once said, that all the cool kids are using a dark theme these days. If you want to join this club, simply type “Dark” into the Quick Access box and press enter. This brings you to the correct preference page. Select Dark, press Apply and Close (and restart your IDE to fully apply the theme).

Eclipse Photon

Eclipse Photon

Selected Dark theme improvements in 4.8

Sometimes the small things do matter. Eclipse 4.8 continues to improve the default text editor. The Eclipse default dark theme now includes styling for the text editor’s range indicator and uses transparency for the expand and collapse buttons.

Eclipse Photon

To improve readability in the dark theme, bold style usage has been reduced in the Java editor and some colors that were too close to each other have been altered.

Eclipse Photon

Lots of icons have been adjusted to look better in both the light as well as the dark theme.

For example, the block selection, word wrap and show whitespace icons have been adjusted.

Before:Eclipse Photon

After:

Eclipse Photon

Popup dialogs, for example the platform’s update notification popup, now use a dark background and a light foreground color in the dark theme.

Eclipse Photon

The same work has been done for the Javadoc popup which makes the dialog much easier to read in the dark theme. Support for other languages will most likely pick this up for the next release, e.g., the PHP team is working on this in https://bugs.eclipse.org/bugs/show_bug.cgi?id=534520.

Eclipse Photon

Links now consistently use a light blue color in the dark theme. One example where this was very visible is the PDE’s manifest editor.

The colors of links in code element information control now take the color settings of the Hyperlink text color and the Active hyperlink text color from the Colors & Fonts preference page into account. The readability in the dark theme has been improved a lot by this.

Before:

 

Eclipse Photon

After:

Eclipse Photon

Also multiple extensions like the Gradle tooling for Eclipse have improved their styling.

For example, this is how the Gradle preference page looked before Photon.

Eclipse Photon

This page is nicely styled in the Photon release.

Eclipse Photon

The Gradle tooling initially designed a relatively complex solution to support the dark theme. The final solution is really simple (see https://github.com/eclipse/buildship/pull/688) and the next chapter is designed to help other plug-in developers to apply the same solution for their plug-ins.

Guide for plug-in developers to contribute to the default dark theme

Plug-in developers can easily support the dark theme as any plug-in can contribute to the default dark theme.

To contribute a CSS file to the dark theme, you can write an extension in your plugin.xml similar to the following. The refid=”org.eclipse.e4.ui.css.theme.e4_dark” points to the platform dark theme and tells the CSS engine to extend it.

<extension point="org.eclipse.e4.ui.css.swt.theme">
    <stylesheet uri="css/your_dark_extensions.css">
        <themeid refid="org.eclipse.e4.ui.css.theme.e4_dark">
        </themeid>
    </stylesheet>
   </extension> 

If you have a custom control, for example MyControl, you can style it for example with the following entry in the “your_dark_extensions.css” file.

MyControl {
 background-color:#515658;
 color:#eeeeee;
} 

If MyControl is a subclass of Control, the existing CSS handler for Control and the properties background-color and color will call its setForeground and setBackground method on instances of this widget.

As for colors and icons, plug-in developers should avoid hard-coded colors and use png icons with a transparent background to look good in the light as well as in the dark theme.

One way to allow styling of colors is to use preferences or even use the colors and fonts extension point for the platform as described in the following blog post.

Styling preference via CSS is very simple. Use the IEclipsePreferences#your-preference-node to select the preference node you want to set. Only replace “.” with “-” for your preference node. You cannot use “.” as these have a predefined meaning in CSS. The Eclipse CSS engine will convert the underscores to the correct preference node. If styling colors and fonts from the platform extension point, you must also add a pseudo-select (in the following example :org-eclipse-jdt-ui) to avoid overridden CSS preference settings from other plug-ins.

Here is an example from JDT UI for styling its colors, which will contribute to the org.eclipse.ui.workbench preference node.

IEclipsePreferences#org-eclipse-ui-workbench:org-eclipse-jdt-ui { /* pseudo attribute added to allow contributions without replacing this node, see Bug 466075 */

preferences:
     'org.eclipse.jdt.ui.ColoredLabels.inherited=143,143,191'
     'org.eclipse.jdt.ui.Javadoc.backgroundColor=52,57,61'
     'org.eclipse.jdt.ui.Javadoc.foregroundColor=238,238,238'
} 

Available tools for CSS work

To analyze or to test CSS snippets you can use the CSS spy and the CSS scratch pad. Install the spies via the following update site.

The CSS spy allows the selection of a UI component and show (and sometimes) change their properties.

Eclipse Photon

To test CSS snippets use CSS scratchpad, also available on the above update site. For example, open the “CSS Scratchpad” view via the Quick Access and use the following:

CTabFolder Composite {
  background-color: pink;
}

CTabFolder CTabItem {
  background-color: lime;
  color: green;
}

CTabFolder CTabItem:selected {
  background-color: blue;
  color: white;
} 

This will style the running IDE similar to the following.

Eclipse Photon

Last but not least, it allows the preference spy to trace changes in the preferences to find the correct preference node and value to style it.

Eclipse Photon

For more information on the spies and the CSS styling see this tutorial on Ecllipse IDE spies and this tutorial on Eclipse 4 CSS styling.

Future work

Of course, the platform team continues to work on the dark theme. Most interesting for Windows users is the work in Bug 508634 which would allow users to set the background and foreground color for (read-only) combo-box which are frequently used in the Eclipse IDE. But again lots of small annoyances will be addressed for the next release, which will arrive only 3 months later after the Photon release.

Good news for the dark theme is that several platform developers, including the author of this article, have switched to the dark theme for their daily work. This also means that the remaining issues with the dark theme are more easily discovered and faster fixed.

How can you help as a user?

Tools like Git, Gradle, and Maven for Eclipse already provide good support for the dark theme and we expect that this support will grow in the future, especially now that plug-in developers have a small guide how to support it. Patches to support the dark theme are also relatively simple (plugin.xml registration of the CSS file and a corresponding CSS file).

So if you are a dark theme user, please open bugs for the components which do not yet support the dark theme. Or even better provide a snippet which you validated via the CSS spy or CSS scratch pad so that the plug-in developers can apply it. Also plug-ins which are still using old gifs (which do not support real transparency), will most likely be happy about contributions of svg version of their icons, so that they can generate png and HDPI png files from them.

Conclusion

So hopefully you enjoy the improved dark theme in Eclipse Photon. Like I said earlier, all the cool kids are using a dark theme these days. ;-)

 

eclipseorb_color

This post was originally published in the June 2018 issue of the Eclipse Newsletter: Eclipse Photon – A Quantum Leap

For more information and articles check out the Eclipse Newsletter.

Author

Lars Vogel

Lars Vogel is the founder, CTO and CEO of the vogella GmbH company. He is one of the core developers of the Eclipse platform project and a contributor a several other Eclipse projects. He loves to share his knowledge by writing online tutorials and books and is a regular speaker at international conferences.. Follow him on Twitter @vogella.


Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of