Themes and Colors
The RD Traveler user interface is based on the Eclipse Orion project, which gives us a nice framework for building a browser-based cloud editor. We reuse and extend their editor, settings pages and various other widgets.
One of the nice features that Orion provides is the ability to customize the color theme of the editor and the overall UI.
We are hoping to impress ISPF users, and ISPF is a typical green-screen mainframe application. This leads directly to the logical conclusion that we need a dark mainframe theme. This turned out to be more challenging than expected.
You can customize the editor using several of Orion's pre-defined color themes. Its even possible to create your own themes.
The Mainframe Classic Theme
Providing a dark mainframe theme turned out to be more challenging than I initially expected. The Orion UI is designed in a way that assumes the color theme has a light background. As soon as I set the background to black all of the text became unreadable because it was black text on a black background. I had to and add new color settings for several areas of the UI that previously were hard-coded and assumed a light colored background.
Furthermore our Navigation page is not taken from Orion. My team built it from scratch using the Dojo toolkit, which has its own approach to themes that is completely separate from Orion. It took some work to get the Dojo widgets to respect the Orion theme.
Here is the result, the amazing new Mainframe Classic theme, next to the default light theme for comparison.
The Settings Page
The Orion settings pages are used to change the color themes. There are actually two separate pages, one for the editor theme and another for the UI theme. We feel that this is a bit cumbersome and have considered merging them into a single page on the future.
One of the really nice things about Orion themes is that changing the theme immediately effects all open tabs. You don't have to go close and reopen every editor tab, then all pick up the new theme setting instantly.
Orion makes it very easy to customize a theme using their color picker. Simply click on an area of the UI that you wish to change and then pick a new color. The modified theme can then be saved under a new name.
Editing COBOL code in a browser using a dark mainframe style theme? What's not to like!