Clean Sheet – an Ergonomic Eclipse Theme for Windows 10 and Mac OS X

Home  >>  Eclipse  >>  Clean Sheet – an Ergonomic Eclipse Theme for Windows 10 and Mac OS X

Clean Sheet – an Ergonomic Eclipse Theme for Windows 10 and Mac OS X

On November 4, 2015, Posted by , In Eclipse, By ,,, , With 47 Comments

Clean Sheet is an ergonomic Eclipse theme for Windows 10 and OS X (see update info 2016/03/21). It has been attuned to lessen visual fatigue and eyestrain, based on a clean and low glare look and feel. It incorporates well-balanced color selections that offer harmonic syntax highlighting and focus on readability. Along with custom scrollbars (Windows only), it additionally strives to satisfy unobtrusively contemporary aesthetic demands.

This post explains the ideas behind the feature, expounds its current development state, and gives an outlook on future enhancements.


Update 2016/03/21: Mac OS X Support

From now on the feature is also available for Mac OS X. Hence, I allowed myself to update the relevant text passages and the title to avoid confusion.

 

Why Another Eclipse Theme?

In my recent past, I experienced more than once serious, optic migraine-like, headaches while working on my computer. Besides consulting an ophthalmologist, this motivated me to reconsider my workplace configuration from the ergonomics point of view. I scrutinized illumination, sitting posture, screen contrasts and brightness, and, not least, the software I’m working with to reduce unnecessary strain.

As a Java developer, the program I probably use most is Eclipse. In conjunction with my perceiving that the available Eclipse themes do not match well with Microsoft’s latest and greatest anyway, it stood to reason to create a new theme with due regard to ergonomic principles. This is how I started this experiment.

The next section gives an overview of the key considerations and implementation strategies that lead to the initial version. Since I’m usually prone to making mistakes, I thought it’s probably best to publish the project early. This way others are able to benefit and help to correct problems and misconceptions at the same time.

Clean Sheet with Respect to Ergonomics

When I hatched the idea of creating an ergonomic Eclipse theme, I wondered where to start. Being a developer, I asked myself what is the most important activity a Java IDE’s look and feel should accentuate? I remembered Uncle Bob claiming that a programmer spends quite a lot of his time reading code:

The ratio of time spent reading (code) versus writing is well over 10 to 1…Robert C. Martin, Clean Code

In this light, it seemed natural that the workbench’s appearance should be optimized for the best possible reading experience. Thus, recalling the somewhat odd look of the built-in themes on Windows 10, I focused my preliminary considerations on the impact of colors on readability next.

Shades of Gray

It turned out that, because of the strong attention steering effects of colors, they should be used sparingly. Too many different shades can cause an uneasy overall picture and lead to ineffective eye fixation [WAND93]. Consequently, Shneiderman [SHPH04] recommends to develop a monochrome graphic design of screens first, to carve out the logical or other relevant relationship representations between units.

This looked like a reasonable approach, but there was still another aspect to consider. Given the popularity of the ‘Dark’ Eclipse theme, it seemed to be important to clarify the preferable text contrast mode with respect to ergonomics.

Black on White, or White on Black?

Assuming a well-illuminated workplace which has been properly adjusted in accordance with ergonomic recommendations, the general advice has been for a long time to use black on white. Doing some research on the topic, eventually convinced me to go in a similar direction too. Let me explain in a nutshell some of the reasoning this decision is founded on, starting with a quote based on a well-hung publication of the 80s:

“However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.” [GRAVIG]

Meanwhile, it seems to be ascertained that the best readability, while sparing the eyes as much as possible, is achieved with “achromatic” contrasts. These are combinations of light gray backgrounds (which, although appearing almost white, avoid strong outshining) with black or very dark font colors [HOLL07]. Holl mentions test series, which have shown that pure black, dark gray or, for example, dark green colors are suited best for text, symbols, lines and similar foreground subjects.

Eclipse Theme: Black on White vs White on Black

Decide for yourself, what lays less strain on your eyes. The upper or the lower part of the picture above? Admittedly it’s not a completely fair comparison, sine the lower part is placed on a bright background. To look at this contrast alone is hard work for your eyes to adjust. But it shows that ergonomics has to be looked at in its entirety. Using bright screens in a dark environment isn’t a good choice either.

The Problem with Plain-Jane

Because of the previous considerations, Clean Sheet started off with a light gray as workbench window and part background combined with a black font. Using gray instead of pure white reduces ‘text-outshining’ tendencies and background glare effects. Accentuations of structuring elements like parts, part stacks, toolbar, trim bars, and so on were also based on decent shades of gray.

However, while black on more or less light gray is perfectly suited for reading plain text, as default settings of readers like Amazon’s Kindle or Evernote’s Clearly suggest, working with code is a bit different. Code is much more structured and a developer wants to recognize this structure at a glance.

To ease the recognition process, text editors support highlighting of special text elements like keywords, field declarations, string constants, and more. Of course, it would be possible to use even more shades of gray to produce the highlighting effects, but my corresponding experiments didn’t turn out satisfying.

If you are looking for a way to create your own syntax highlighting color theme for Eclipse you might check out Eclipse Color Themes. They provide an online service for theme creation and an Eclipse plug-in to install and switch themes provided by this service. This is much more comfortable for getting started than writing your own theme extension or the like.

On the one hand, having all this nuances of gray didn’t really lead to well perceivable structuring. On the other hand, the workbench’s overall impression got a bit boring and sleep inducing. Hence, I felt it was about time to bring a dash of color into play.

Introducing Spots of Color

While keeping the basic text elements black, I began a quest on the color wheel for a syntax highlighting palette which could serve as a structuring foundation and a mood booster at the same time. Referring to terms of color psychology, I opted for a stimulating color on keywords, a factual one on fields, literals etc., and a soothing one on java doc sections, for example.

Altogether, it was important to find a harmonic scheme that would blend in nicely with the workbench’s presets of iconographic elements and the like, but avoid distracting effects as much as possible. The following picture, a screenshot of my real world setup, shows what I finally came up with (click on the image to enlarge).

Eclipse Theme: Clean Sheet Screenshot

Well, isn’t she a beauty? 😀

Incorporation of Flat Scrollbars (Windows only)

The attentive observer surely has recognized the different scrollbar styles used by the package explorer and the text editor. Clean Sheet uses the custom SWT Scrollbar component I’ve introduce a couple of months ago in my post Sacrilege – a Custom SWT Scrollbar. The reason to create this component was that the native SWT scrollbar often looks a bit disruptive on more subtle view layouts.

Using FlatScrollbar instances daily, I took such a fancy to them that I began to explore the possibilities of adapting controls of existing SWT applications. Although there is a ScrollableAdapter for trees, tables and styled text (as from March 2016), there are technical hurdles that prevent their usage as a simple style replacement.

Eclipse Theme: EGit History with Flat Scrollbars

Yet, the styling capabilities of SWT open a door that allows to hook in the flat scrollbar overlay adapter. However, this approach started off highly experimental and I didn’t expect it to be successful due to the amount of ‘creative programming solutions’ it required 1. But, after eating my own dog food for some months now, and with most of the issues settled, it seems to work surprisingly well – at least for the UI parts within the Java IDE’s scope of whom I’m aware of.

For fans of the windows 7 and windows dark theme, the Code Affine Theme feature provides extensions for both that incorporate the Xiliary FlatScrollBar component on trees and tables.

Windows Theme with FlatScrollbar Eclipse Theme Windows with Flat Scrollbars
Dark Theme with FlatScrollbar Dark Eclipse Theme with Flat Scrollbars

Outlook

Clean Sheet has only been tested with the Eclipse Java IDE yet. Because of this I wouldn’t be surprised if more extensive workbench setups bring unexpected difficulties to light. Parts based on the Eclipse Forms Toolkit look a bit like alien elements which, however, isn’t much of a change in my opinion (shame on me)… If the styling doesn’t work out for you, there is no harm done. Simply switch back to your preferred theme, restart the workbench, and go on with your work.

Note 2015/11/18: As mentioned above, Clean Sheet comes with its own syntax highlighting settings. In case you use a customized highlight color configuration instead of the presets associated with your current theme, these values will most probably be overridden and lost.

In the near future, I expect to solve the remaining bugs filed in the Xiliary issue tracker and undertake some fine tunings derivated from daily work experiences and increasing knowledge.

In the longer term, and if the concept proves itself useful, I plan to stretch the scrollable adapter mechanism to more SWT components with StyledText, the control which all text editors are based on, leading the way. So stay tuned, it will be exciting 😉

At a Glance

About Clean Sheet…

Requirements (March 2016)

JRE 8, Windows 10 or Mac OS X, Architecture 64 bit, Eclipse 4.5, and newer.

Download and Installation

Drag and drop the ‘Install’ icon into a running Eclipse workbench to install ‘Code Affine Theme’ feature.

Drag to your running Eclipse installation to install Clean Sheet

or

Select Help > Install New Software…
P2 repository software site @ http://fappel.github.io/xiliary/
Feature: Code Affine Theme

After feature installation and workbench restart select the ‘Clean Sheet’ theme:
Preferences: General > Appearance > Theme: Clean Sheet

Licence

Published under the terms of the Eclipse Public License, version 1.0.

Home Page

http://fappel.github.io/xiliary/clean-sheet.html

References

[GRAVIG]: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis
[HOLL07]: Friedrich Holl, Fachhochschule Brandenburg, Software Gestaltung: Farbe auf dem Bildschirm
[SHPL04]: Shneiderman, Plaisant: Designing the User Interface. Strategies for Effective Human-Computer Interaction. Addison-Wesley, 2004
[WAND93]:Jens Wandmacher, Software Ergonomie, Gruyter, 1993

  1. To be honest, there were quite a few ‘children don’t do this at home’ hacks necessary to achieve the outcome. But no guts, no glory…
Follow me

Frank Appel

Frank is a seasoned programmer, team leader, trainer, author and presenter with two decades of experience in professional software development.

Specialized in the Java language and focused on quality-oriented agile paradigms he is a stalwart of test-driven practices in particular.

He understands the creation process of software as a craftsmanship based on a well-balanced mix of knowledge and the experience of the daily work.

fappel@codeaffine.com
Follow me

47 Comments so far:

  1. remerson says:

    Hi Frank, thanks for this theme, it really produces a very clean workbench look.

    However, it also overrides the user’s syntax coloring settings — and the overrides seem permanent 🙁 Even after going to back to Classic theme, it seems that some of the syntax coloring settings can’t be changed back to my original chosen value (e.g. Java local variable color). In fact they can’t be changed at all, they are somehow locked to the theme colors.

    Is there any way for the theme to leave the user’s syntax coloring in place? Or at least allow it to be changed.

    • Frank Appel says:

      Hi Richard. That is odd. I just checked it with my local workspace against a fresh Eclipse installation. When switching to one of the available themes, the syntax highlighting settings seems to change to the appropriate values mapped for the given theme as expected. At the moment, I don’t have a clue why this does not work for you. Have you restarted your workbench? Are there any error log entries that may point to a problem source? Or am I missing something?

      Besides, the Java local variable color might not be the best example here. This is because (and if I’m not mistaken) it’s probably the only color setting which is equal to the one in the classic theme (#6A3E3E). The blocking might be also related to issue #33. I will have a look at it. But it should vanish once you’ve restarted the workbench.

      Thanks for checking out the theme!
      Frank

      • Frank Appel says:

        Hi again, I just checked once more the preference facility to change syntax highlighting settings. But it seems to work either way, even without workbench restart. So my previous link to the bug was probably wrong. What exactly do you mean by locked?

    • tumit says:

      Have you try to delete .eclipse folder in C:\Users\[Username] yet?

    • Daniel says:

      Same problem here. The tabs style are very nice BUT I can’t use this theme because it keeps changing my syntax coloring settings and sometimes even the font type.

      • Frank Appel says:

        Thanks for checking out clean sheet. Sorry, that it doesn’t work out for you as expected. However, you might consider an enhancement request at the afore mentioned github issue tracker to request a more sophisticated fine tuning with the configuration abilities.

  2. Paul Bilnoski says:

    I started using the theme (because you made it so easy with DND opening it in marketplace, thanks!) and like the look quite a bit, but a few issues make it difficult for me, requiring reverting the theme for some operations and then switching back for “normal use”. Specifically, when using EGit the dialog that displays after a push has no visible content in the top half where the tree view was (message details section displays properly) and when adding an existing git repo to the Git Repositories view the check box list seems disabled: it does not allow scrolling or checkbox toggling. There may be other places affected by the underlying issues.
    Thanks for your theme and attention to all aspects (scrollbars, syntax coloring)! I look forward to using it.

    • Frank Appel says:

      Hi Paul, thanks for trying out the theme and reporting the problems. The checked tree problem for adding Git repositories seems to be the same as that which is reported in issue #30. I filed issue #33 for the EGit dialog after push trouble. This way everybody can track the fixing progress 🙂 Will try to accomplish this ASAP.

      • Paul Bilnoski says:

        Thanks, Frank. I neglected to dig too deeply, but now that I see the github page and issue tracker you directed me toward, I’ll use that to help in the future.

        • Frank Appel says:

          Great! Thanks for the support and for attach the image depicting the problem to the issue! That makes problem even more clear.

  3. Tim says:

    My Eclipse IDE has never looked better.

  4. Peter says:

    Thank you for this theme, is awesome. I really appreciate that scientific background behind this theme. Great work.

  5. Mirko Seifert says:

    I’d like to try the theme, but I can’t install it. Neither using the Install button nor using the update site directly works. I think there is something wrong with the feature dependencies. I’m using Eclipse Mars SR1.

    • Rüdiger Herrmann says:

      Sorry to read that you aren’t able to install the software. Would you mind to open an issue here: https://github.com/fappel/xiliary/issues
      and share more details? If the install operation fails, please attach the relevant log entries. Does the feature show up in the about dialog? Which Mars packages exactly do you use?

      • Mirko Seifert says:

        I’ve tried to reproduce the problem with a fresh Mars installation and the installation worked just fine. After that I tried again with my original Eclipse installation and this time the installation worked. Maybe there was some temporary problem with the update site? Thanks for the help!

        • Frank Appel says:

          Good to hear that it finally worked out. Indeed, this could be caused by a temporary problem with the update site. Thanks for checking out Clean Sheet!

  6. Dave L says:

    This is a major visual improvement for Eclipse! Thank you for spending time developing this.

    Is there a way to also implement the same narrow scroll-bar used in the project view on the code view? (I’m using Windows 7)

    • Frank Appel says:

      Hi Dave,

      I’m glad to hear that you like Clean Sheet. The code editor is based on the StyledText SWT widget. I have planned to extend the scrollbar overlay mechanism to adapt also this widget as the main feature for the next minor release. If I succeed with this the narrow scroll-bars should be available within the first quarter of this year on every IDE entity that uses StyledText widgets including, of course, the Eclipse text editors.

      Frank

  7. tinhcao says:

    Could you make it available for older eclipse such as Luna, Kepler and it is compatible Window 7 ?
    Thanks.

    • Frank Appel says:

      Thanks for bringing up the backward compatibility issue. In general, it should be compatible with Windows 7 and probably work with Luna or even Kepler. But due to the lack of resources, Clean Sheet has been confined declaratively to Windows 10 only which keeps the maintenance effort as low as possible. I’m sorry for all who can’t use Clean Sheet because of that limitation.

  8. Charles says:

    Hello

    Nice theme. Wierd to use orange and green but nice on the eyes.

    I stumbled here looking for a way to increase package explorer and outline font size.

    Where is your CSS style sheet located?

    Cheers.

  9. John B. says:

    I have a problem to install it.

    I have Eclipse 4.5.2 and Windows 10. I install by both ways (market and button) but no one works.

    I go to Appearence -> Theme and this dont appear. Whats the problem? No errors or something like this during install.

    I look in blog or git issues but i dont find anything.

    I wait por anyhelp.

    • Frank Appel says:

      Hi John, thanks for checking out Clean Sheet. Are you using Java 8 and do you have a 64-bit machine? These are also necessary requirements. If you do, then please give me another note.

      • John B. says:

        It is all ok now.

        Whats a problem of new install in my pc. Eclipse was installed with JDK 7 as default java home and config was with jdk 7.

        Thank you for fast reply.

        You do a really good job with this theme. Congrats 🙂

        • Frank Appel says:

          Great! Glad you like the theme 🙂

          • Raul says:

            Hi Frank,

            seems to be a great theme but I could not make it work. I have Eclipse Mars running on a 64bits Mac, with the Oracle JDK 8. This is part of the Eclipse Installation details:

            eclipse.buildId=4.5.2.M20160212-1500
            eclipse.commands=-os
            macosx
            -ws
            cocoa
            -arch
            x86_64

            clipse.vm=/Library/Java/JavaVirtualMachines/jdk1.8.0_73.jdk/Contents/Home/jre/bin/../lib/server/libjvm.dylib

            Could you help me with that please?

          • Frank Appel says:

            Hi Raul, thanks for checking out Clean Sheet. I’m sorry that it doesn’t work for you – yet. So, let’s try and find out what’s going wrong.

            When you open the Eclipse About Dialog, is Clean Sheet listed as installed feature? If not the installation failed. In that case, check out the error log to see if there are any hint’s that might explain the failure reason. If the feature is listed, the installation succeeded but somehow the theming might not be picked up. Please check if the Theme ‘Clean Sheet’ is listed in the Preference->Appearance drop-down. If not, again, check the error log, if there are any indications of runtime problems. If the theme is listed and it doesn’t change the look and feel on selection, please try to restart the workbench. If that doesn’t help, see if the theme selection has caused any error that has been written to the error log.

            If you have gathered additional information about the problem and found an error trace or the like please open an issue at https://github.com/fappel/xiliary/issues, which allows us to take it from there and fix it. Thanks, Frank

  10. tinh cao says:

    Hi Frank, did you disable fast scroll (press CTRL + SCROLL) ?. After install i can’t do it (ctrl + scroll too slow ).

  11. Juan says:

    Hi,

    I tried the theme in Windows and works fine, I like it! great job!, but however I have a problems in Mac OS, I did the same during the installation, It seems to be installed correctly (I don’t see any error after the installation), but when I go to Window -> preferences -> general -> appearance… I can’t see the theme in the list.

    Could you help me please?

    • Frank Appel says:

      Juan, thanks for checking out Clean Sheet. Just to exclude a slip of the pen: You use Eclipse with Java 8 on a 64 bit Mac OS machine? And I figure there are no errors in the error log? Seems that Raul (#comment-134100) had similar problems. But as I didn’t receive additional information I thought he might have figured it out or given up. Holger Staudacher the pal who helped me with the Mac part, once encountered a similar problem during a debugging session at the development stage. But as the Eclipse test instance was somewhat ‘worn’, changing the installation resolved this, and the problem never occurred again – so far – I considered it some kind of ‘cosmic glitch’. Well, I should have known better. Unfortunately, if there are no entries in the error log I’m somewhat in the dark. Could you try to check if the problem persists with a fresh Eclipse installation? If you can’t get it to work, please file an issue at https://github.com/fappel/xiliary/issues with the Eclipse installation details (including the feature/plugin list if possible), so that we can take it from there.

      • Juan says:

        Hi Frank, sorry for late reply. Today I reinstalled the jdk 8 (64 bits) and tried to install again, but I get the following error:

        An error occurred during the org.eclipse.equinox.internal.p2.engine.phases.CheckTrust phase.
        session context was:(profile=epp.package.jee, phase=org.eclipse.equinox.internal.p2.engine.phases.CheckTrust, operand=, action=).
        Error reading signed content.
        /Users/juan/Tools/eclipse/Eclipse.app/Contents/Eclipse/plugins/com.codeaffine.eclipse.swt_0.3.0.20160524-0726.jar (No such file or directory)

        Tomorrow is the release of Eclipse Neon, the “clean sheet” will be compatible?

        Thanks

  12. Rogelio Heredia says:

    Hey guys, i loved CleanSheet, it looks so nice, i don’t even miss the black background, but i have one issue, when debugging the current line its black or almost black and the text is also black, so it’s really annoying, i want to know if there is a way to fix this, thanks and great job guys.

    • Frank Appel says:

      Rogelio,

      thanks for checking out CleanSheet! Unfortunately, I think I don’t understand your problem completely. Could you please open an issue at https://github.com/fappel/xiliary/issues and maybe add a screenshot to clarify the behavior? Thank you very much. We’ll take it from there!

      Greetings
      Frank

  13. stukdev says:

    I try with Eclipse 4.5 and win10, but the theme is different from yours! Is there other settings that i’ve to configure?

    • Frank Appel says:

      Hi, thanks for checking out Clean Sheet. In what way is it different? Simply select the Clean Sheet Theme on the appearance preference page, that’s all it should take…

  14. Amos says:

    Hey Frank, I tried out this theme and I could definitely get used to the colouring of the text and the scrollbars, but here are a few observations from this armchair critic. Feel free to ignore… 😉

    * I was hoping for something gentle on the eyes, but overall I still find it quite glaringly bright (but I can’t put up with the garish colours of code in the built-in dark theme). Divisions between tabs are invisible until you hover, and then they just show lines on each side.
    * The “Source Code Pro” font that it uses looks awful when “Show Whitespace Characters” is turned on – in Courier New, the dots shown for spaces and the EOL characters are small, faint and unobtrusive.
    * When you use your editor to view files side-by-side, the top bar with the minimise and maximise buttons uses up a whole lot of space. Some themes try to make them rather small
    * I personally like to set my “occurrence highlighting” to bright yellow and darker yellow for write occurrences; your theme uses the same light yellow for both, which is hard to spot on the overview ruler on the right.

    Appreciate your effort in creating this theme.

    • Frank Appel says:

      Thanks for your criticism and ideas which I will consider next time when I spend some work on the theme. With respect to the glaring effects, this depends also strongly on the monitor, the settings of the latter, light reflections and so one. You might experiment with the contrast and brightness settings for example and ensure that the monitor is located within a 90-degree angle to your main window and the like. Using the theme in a dark room, for example, would be completely counter productive..

  15. Csaba says:

    Hi,

    I am looking for the .zip version of the update site, since we are running eclipse behind content filtering/firewall, so we can’t use p2 repos to get eclipse plugins. 🙁

    Can you help me?

    Thanks

    • Rüdiger Herrmann says:

      Xiliary does not provide a zip archive of its p2 repository. However, the p2 repository is served through the gh-pages branch of the git repository. You can download the zip archive of this repository branch from here: https://github.com/fappel/xiliary/tree/gh-pages,

      Use the green ‘Clone or download’ button to download the archived git repository to your computer, unpack it, and use it as a local p2 repository. Though the archived git repository contains some bulk it should serve well as a local p2 repository.

      If you think it would be a useful extension for Xiliary to provide a zipped p2 repository, please file an enhancement request here: https://github.com/fappel/xiliary/issues

Leave a Reply

Your email address will not be published. Required fields are marked *