Creating themes

You can create a theme to provide common styling to a set of 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 Carbon theme because it contains a complete set of variables that the views in the UI toolkit use. If you want to create your own theme and use any of the UI views in your process application, use the Carbon theme as your starting point. You can then extend your theme by adding custom variables and modifying the variables. The variables start with a bpm prefix.

Procedure

Click the plus sign next to User Interface and then select Theme.
Specify 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, ensure that it contains all the variables and the comments and metadata. If the theme does not contain these variables and you use UI views, an error occurs when the system generates CSS for the process application. For this reason, base your theme on the Carbon theme or another theme that you know has all of the variables. The 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 sample views update to display the new values. If you hover over a view, you can see the specific variables that affect that view and its current values.
- In the Source page, assign a value to each theme variable that you want to change. If you have custom 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 views that use that theme. At run time, the CSS code is already generated so that no delay occurs.