Show TOC

Basics of ThemingLocate this document in the navigation structure

Here you find information about the basic concepts that are involved when creating themes with the UI theme designer.

What is a Theme?

A theme defines the visual appearance of an application, including font size and type, colors of UI controls and background images. It can be applied to applications built in various UI technologies to suit the purpose, topic, or tastes of different users.

A custom theme created with the UI theme designer is always derived from an SAP standard theme (for example, SAP Blue Crystal). Each SAP standard theme, in turn, is derived from the base theme.

The Source Language LESS

The UI theme designer uses the style sheet language LESS (Leaner CSS) as the source file format for theming data. LESS extends CSS with dynamic behavior such as variables, mixins, operations, and functions. These techniques allow you to make CSS that is more maintainable, themable and extendable.

With LESS, you can define variables centrally and reuse them throughout the style sheet. You simply use an @ sign to define a variable and a colon to assign its value: 

@myColor:value

Rather than repeating the value, you can reference the variable. During the CSS build process, the values of the variables are inserted into the output CSS file.

In addition, LESS allows operations and functions. Operations allow addition, subtraction, division, and multiplication of property values and colors, which can be used to create relationships between properties. Functions allow the manipulation of values. For example, you can define a color by desaturating another color:

@myColor:desaturate(@color1, 10%);

How the UI Theme Designer Uses LESS

The UI theme designer exposes a set of LESS-based theming parameters in the Quick and Expert tab. Theming parameters can be color values, text sizes, icons, background images, etc. For example, the Quick tab offers the theming parameter @sapHighlightColor.

Changed parameters are stored in the custom theme. In the theme build process, the changes to the SAP standard theme are concatenated. The theme generator substitutes all references to the CSS variable by the current value of this variable. Thus, the final CSS contains the redefined properties (for example a different highlight color).

Since custom themes only store the custom changes, future updates to the base themes will propagate to the custom theme parameters that have not been changed.

Related Information