Example: applying the Carbon theme

Edit online
This example shows how to apply the Carbon theme to a process application that uses the Classic theme, and illustrates how the Carbon theme changes the look of an existing coach.

The Carbon theme is available in the System Data toolkit and provides visual assets, such as colors, icons, and typefaces that align the look and feel of your process applications and views with the guidelines of the IBM® Design System. For more information, see Carbon Design System External link opens a new window or tab.

By default, any new process application uses the Carbon theme, which contains all the definitions that are used by the views in the UI toolkit. This example shows how to apply the Carbon theme to an existing process application that uses the Classic theme, and illustrates how changing the theme changes the look of the Hiring Sample.

  1. Open the Hiring Sample in Process Designer.
  2. Open the process app settings for the Hiring Sample. Under Coach Designer Settings, change the Classic theme to the Carbon theme.
  3. Click Save or Finish Editing. The save triggers generating the CSS that Process Designer uses to display the views in the layout.
  4. To see the effect of changing the theme, open the Create Position Request client-side human service, and then open the Create position request coach. The following image shows the look of the Create position request coach when the Carbon theme is applied:
    The Create position request coach has the Carbon theme colors, for example, bright blue section headers.
If you change the Hiring Sample back to using the Classic theme, the same coach reverts to the default Classic theme colors:
The Create position request has the Classic theme colors, for example, dark blue section headers.