So you just created your first mobile Application with APEX 4.2 and now wonder how to get your company colors in?

Thanks to jQuery mobile this is a pretty easy task as they provide a tool for that: the ThemeRoller.

Read a german Version of this post at click-click IT Solutions.

Carsten Czarski wrote a good posting on how to use the ThemeRoller and get the new Layout into APEX. Unfortunately it is in german, but the pictures should be pretty self-explaining.

There is just one problem you need to solve before you can start with the ThemeRoller. You have to find out, which “Swatch” (or “data-theme”) you will have to modify.

With JQM’s model you can have up to 26 swatches per Layout. Each swatch is identified by a letter from a to z and can be specified directly in the HTML Code or through a CSS class or using Javascript. And then there are some defaults…

The Layout delivered with APEX has 5 swatches in it and all of them are used :-)

The Documentation of JQM tells us that it uses “a” by default, sometimes this is overriden for sub-elements to “c”.

An easy method to find out which swatches are used is searching your application with the application builder search.

At first we search for “data-theme”  and then for  “ui-bar”. See the result in these two screenshots.

Now you got all the information you need. Either adapt all 5 Swatches with the ThemeRoller, or change the APEX Templates to use fewer Swatches…

Have fun!