The UI theme designer is a browser-based tool for cross-theming scenarios that allows you to apply corporate branding to applications built with SAP UI technologies.

Theming SAP Fiori

SAP Fiori user interfaces are constructed using SAPUI5 control sets that are meticulously styled with CSS. SAP Fiori comes with an enhanced theming experience that utilizes a simple LESS-based semantic parameter structure which supports theming and customization. Using one simplified code line, SAP Fiori applications can work with multiple themes and also support high-contrast accessibility requirements.  The standard SAP Fiori theme can be modified, for example, by replacing the logo or changing the colors of a certain part of the control set to accommodate any company’s visual language and brand. This can all be easily done using SAP’s UI theme designer.

Semantic Theming

The concept of semantic theming is to use LESS parameters linked within the UI controls that indicate a certain semantic. This means that you could modify or change the value behind the parameter and get an idea of which controls or semantic appearances are affected. For example, all of the theme parameters for input controls (such as the input field, radio button, checkbox, and more) have been grouped together and contain the word ‘field’.  Similarly, all the color parameters for lists and tables (background, separators, and so on) have been grouped together and contain the word ‘list’. These names can be viewed in the theme designer.

By defining a semantic color name such as ‘button background’, for example, it is possible to connect it to different theme color values. The UI theme designer packages all the changed parameters into a custom theme that can be deployed on multiple systems and used with all applications that support the Belize theme.

Resources