Example: applying a custom theme
This example shows how to create a custom theme and then set a process application to use that theme.
By default, a new process application uses the BPM Theme. This theme contains all of the definitions used by the IBM® BPM responsive controls. This example creates a theme that is based on the BPM Theme and modifies two variables to change the appearance of many responsive controls. The example then opens the Hiring Sample to change its theme to the new custom theme to demonstrate how changing the theme changes how the Hiring Sample looks.
- Open the Hiring Sample in the Process Designer.
- Create a theme called Custom Theme by copying the BPM Theme. For information, see Creating Themes.
- In the Design page of the theme editor, change the following
variables:
Table 1. Variable changes for the Custom Theme Variables Old Value New Value @bpm-color-primary in Base Settings #325C80 #277554; @bpm-input-bg in Forms #fff #d9ece3 The example controls update to show the effect of these changes. For example, the example button is now green.
- Click Save or
Finish
Editing. - Open the process app settings for the Hiring Sample. In the Coach Designer Settings section, change the theme to the new theme and then save your change. The save triggers generating the CSS that Process Designer uses to display the controls in the layout.
- To see the effect of changing the theme, open the Create Position Request CSHS human service and
then open the Create position request coach. The CSS generation takes time so a delay might occur
before you see the effect, which looks like the screen capture:
If you change the Hiring Sample back to using the BPM Theme, the same coach reverts to the default BPM Theme colors:
