Configure a Theme for a Custom Client Application

Custom client applications developed with the Client Application Framework use TIBCO specific themes to define the colors used by the application.

An internal tibTheming service uses the AngularJS Material $mdTheming service to provide and manage themes.

There are two TIBCO specific themes:

  • All applications use the Default theme.
  • The Workapp application also uses the Aquamarine theme.
Note: It is not possible to modify the Aquamarine theme or create or add a new theme.

There is a Theme_Customization_Example application that demonstrates how to use the tibThemingProvider function to configure how an application uses the Default theme. This application changes the colors for a clone of the Workapp application.

In Application Development, open the MyWorkCtrl.js file in the Theme_Customization_Example application. The config phase on the application controller module defines the tibThemingProvider function. The function does the following:

  1. It overrides the existing default theme with a set of custom palettes.
  2. It defines the colors used by those palettes.
  3. It enables watching for theme changes. 
   app.config(["tibThemingProvider", function(tibThemingProvider) {
   
    tibThemingProvider.theme('default') // Overriding existing 'default' theme 
                                        // with the following custom theme.
    .
    .
    tibThemingProvider.definePalette('customPaletteName-primary', {
    '50': '#d9001e',   // for user profile background
    .
    .    
    tibThemingProvider.alwaysWatchTheme(true);
    
    }]);

See Theme Color Definitions

Note: Do not delete the palettes: customPaletteName-accent, customPaletteName-warn and customPaletteName-background.

The tibThemingProvider function contains color definitions for these palettes, however, the Client Application Framework themes do not use them, and any changes to their color values has no effect. These palette definitions must be present and complete, otherwise the $mdTheming service will reject the theme as invalid during registration.

Procedure

  1. Copy the example tibThemingProvider function to the application controller file, within the config phase on the application controller module.
  2. Change any of the following color definitions in the customPaletteName-primary palette.
  3. Save the changes.
    Use PREVIEW or LAUNCH LOCAL to test the app.