Themes

A theme consists of a set of theme definitions, dynamic stylesheets, and generated CSS that you can apply to a workflow automation or toolkit.

A theme definition is a set of theme variables and their values. For example, a theme definition can have a background variable and a value of white. A view can have a dynamic stylesheet that uses the variables from the theme definition. When a number of views use the same theme definition, you can have a set of views that have a consistent visual appearance. Additionally, it is easy to make a global visual change to these views by changing the theme variable values without touching the view definitions. Theme definitions and dynamic stylesheets support the Less stylesheet language so that you can use its syntax and functions to enhance your custom views.

A view uses the theme definition of the running context, which is the workflow automation or toolkit that is currently using the view. You can use this feature to have views in one workflow automation styled in one way and the same views in a different workflow automation styled in a different way. While the two sets of views have the same dynamic stylesheets, the stylesheets use theme definitions that have different values.
Diagram of a theme that consists of a set of theme definitions, dynamic stylesheets, and generated CSS that you can apply to a workflow automation or toolkit

Theme definitions and dynamic stylesheets are combined to automatically generate a set of .CSS files. When a workflow automation displays a page, it uses these CSS files to style the views that are contained in the page. Generating the CSS takes some time, so if you are viewing the workflow automation in designer, you might see the views in the page use default or old theme values until the new CSS is available. At run time, the CSS is already generated for deployed workflow automations and a delay does not occur.

When the designer displays a view, it uses the theme of the currently open workflow automation or toolkit to style views in the layout. This feature means that the same view can look different in the designer depending on which workflow automation or toolkit you have open. The Carbon theme in the System Data toolkit is the default theme for newer workflow automation, which provides the theme definitions for your views. The Carbon theme provides the visual assets (colors, icons, typefaces, and so on) that align the interactions and the look and feel of your workflow automations 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.

You can also apply a theme from a custom toolkit. For example, you create a type of button view in a custom toolkit. In the toolkit in the designer, the theme applied to the toolkit styles the button to blue. A workflow automation has the toolkit as a dependency. However, the workflow automation has a theme that styles the button to orange. The context in which you view the button determines the color of the button:
  • If you open the toolkit in designer and add the button to a page or view, the layout shows the button as blue.
  • If you open the workflow automation in designer and add the button to a page or view, the layout shows the button as orange.
  • If you run the workflow automation, the browser shows the button as orange.
In addition to the styling that you can apply through a theme, you can also apply styling in other ways in designer. The following list contains the various ways that you can style a view with items higher in the list overriding values set lower in the list:
  1. Classes and attributes added in the HTML Attributes page of the view layout properties.
  2. Styling included in the inline CSS of the view behavior. To avoid class name collisions, use inline CSS to temporarily develop the CSS styles. After you develop the styles, put them into an included script.
  3. CSS in the included scripts of the view behavior.
  4. Style definitions set in the dynamic styling of the view behavior.
  5. CSS definitions set by the theme of the workflow automation or toolkit.
There is also a hierarchy that you can use to style individual views. The style values of a view in a container override the style values set by the container itself. For example, a workflow automation has a theme that styles all its views to use the Primary color (blue). However, if you style a button instance in a page in that workflow automation to use the Success color (green), that button is green. The controls in the UI toolkit provide this way of styling instances through configuration options.