Creating themes

You can create a theme to provide common styling to a set of coach views.

About this task

Creating a theme consists of assigning values to a set of theme variables. By default, a new process application uses the BPM Theme because it contains a complete set of variables that the controls in Responsive Coaches toolkit use. If you want to create your own theme and use any of these responsive controls in your process application, use the BPM Theme as your starting point. You can then extend your theme by adding custom variables and modifying the BPM variables. The BPM variables start with a bpm prefix.

Procedure

In the library, click the plus sign in the User Interface category and then select Theme.
In the New Theme window, type the name of the new theme.
Select whether you want to copy an existing theme from the current project or dependent toolkit or import a theme.
Important: If you are importing a theme and you are using responsive controls, ensure that it contains all of the BPM variables as well as the comments and metadata. If the theme does not contain these variables and you use BPM controls, an error occurs when the system generates CSS for the process application. For this reason, base your theme on the BPM Theme or another theme that you know has all of the BPM variables. The BPM variables start with bpm and they are reserved.
After you click Finish, the editor opens the new theme.
In the theme editor, assign values to theme variables. The value can be a specific value, a formula, another variable, or a combination of these types. For example, @bpm-neutral: #586464 defines the value to a specific color while @bpm-link-color: @bpm-color-primary; defines the value with the value of another variable.
- In the Design page, change the value for one or more variables. Many variables have a swatch that you can click and then choose a value from a picker. The example controls update to display the new values. If you hover over a control, you can see the specific variables that affect that control and its current values.
- In the Source page, assign a value to each theme variable that you want to change. If you have custom coach views that you want to add dynamic styling to, add variables for that styling. The variables are in Less format:
```
@variableName: value;
```
  If you want to display a custom theme variable in the Design page, add metadata like the following example:
```
                                //|EM|{"group":"PREVIEW_GROUP_BASE_SETTINGS","order":"010020","type":"color"}|DE|
@bpm-neutral-darker:  #2d3737;  //|EEM|
```
  The group is the name of the category that contains the variable. In the example, PREVIEW_GROUP_BASE_Settings is a key to a value in a localization resource (Base Settings) but it can be an ordinary string.
The Design page and the Source page react to changes made in the other. For example, you add the following variable to the Source page
```
                                    //|EM|{"group":"My Group","type":"color"}|DE|
@my-color:            #0d1122;      //|EEM|
```
If you go to the Design page, you can see a My Group category that contains a my-color variable.
Click Save or Finish Editing.

Results

It can take some time to generate CSS code based on the updated values in the theme definition. For this reason, a delay might occur before Process Designer uses the new values in the theme definition to display coaches and coach views that use that theme. At run time, the CSS code is already generated so that no delay occurs.