Dynamic Theme Switching

Theme switching allows your application developers or end-users to dynamically change the presentational style of your application without affecting the layout or content. This functionality is useful during application development and testing when multiple themes can be compared "side-by-side" at the click of a mouse. Providing your application end-users with mutliple themes can greatly benefit people with visual deficiencies and could create a unique selling point for your product.

A theme controls both the layout and style of your APEX application with templates (HTML) and CSS respectively. In many of the themes supplied with APEX the style has been hard-coded into the templates, making editing tedious and dynamic theme switching impossible. Our APEX themes have been carefully designed to seperate style from layout. Not only does this make our themes straightforward to modify it also makes dynamic theme switching possible and simple.

Our themes are grouped by series: alpha, bravo etc. Themes that belong to the same series share a common template set and can be seamlessly interchanged. Our themes make use of a single, global substitution string to define the current style. The guide below describes how to dynamically modify this value to create a theme switcher for your application.

Install a default theme into your application as described in the Installation Guide.

  1. Create a page zero in your application if one doesn't already exist.
  2. Create a new HTML region on page zero. Set Title to "Theme Switcher", Template of to "No Template" and Display point of to "Region Position 3". Click Create.
  3. Create a new Select List (with submit) item. The item should be named "THEME_PATH" (it should not start P0_) and placed in the region you previously created. Click Next to move through the wizard.
  4. The Display Null Option should be set to "No", then click Create or edit static List of Values to provide the LOV details.
  5. In the popup enter the details for the Select list. The Display Value should be the name of the theme and the Return Value should be the location of the theme assets. For example:
    Sequence Display Value Return Value
    1 Alpha 001 /i/themes/alpha_001/
    2 Alpha 002 /i/themes/alpha_002/
    3 Alpha 003 /i/themes/alpha_003/
  6. Set the Label to "Theme" and click Next then Create Item.
  7. Now run your application.

You will now have a theme switcher control on every page of your application. Selecting an alternative theme from the drop down list will instantly change the theme of your application.