Basics of Theming

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

What is a Custom 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 an application to suit the purpose, topic, or tastes of different users.

A custom theme is a new theme adapted from an SAP standard theme that includes changes desired by a customer. A custom theme is typically created using the UI theme designer to change theme parameter values, images, and other resources. The UI theme designer generates the CSS for the custom theme which can then be deployed to the target server along with any uploaded images or other resources. The degree of support for the custom theme depends on the features used. Themes may support one or more UI technologies.

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.