In SAPUI5 applications, the look and feel plays a vital role in ensuring a consistent and engaging user experience aligned with corporate branding and SAP Fiori design guidelines. The UI5 Theme Designer is SAP’s official tool for creating and customizing SAPUI5 themes, enabling developers and designers to tailor UI appearance without deep CSS expertise.
This article explores the UI5 Theme Designer, its features, and how to effectively work with it to create and maintain custom themes in SAPUI5 applications.
The UI5 Theme Designer is a web-based application provided by SAP that allows users to:
sap_fiori_3, sap_belize)It abstracts the complexity of theming by providing a visual interface with guided options and parameters.
The Theme Designer can be accessed via SAP’s public URLs or installed on-premise as part of SAP Fiori tools. The cloud-based version is typically available to SAP customers and partners.
You can create custom themes by inheriting from standard SAPUI5 base themes such as:
sap_fiori_3 (latest Fiori design)sap_belize (legacy theme)This allows reusing existing styling rules and only overriding selected variables.
Modify UI parameters using:
Theme Designer lets you edit SAPUI5’s LESS variables, which compile into CSS. This enables granular control over the UI appearance.
Preview the theme live on sample controls or your own application UI before exporting.
Export the customized theme as a ZIP archive containing the compiled CSS and resources. These can be deployed:
Start by choosing a base theme to inherit from. For example, sap_fiori_3 is recommended for new Fiori applications.
Use the visual editor to adjust colors, fonts, and layout variables. Change:
Utilize the built-in preview to see how changes affect UI elements such as buttons, tables, and inputs.
Once satisfied, export the theme package.
"sap.ui5": {
"resources": {
"css": [
{
"uri": "themes/custom_theme/library.css"
}
]
},
"models": {},
"rootView": {...},
"theme": "custom_theme"
}
The UI5 Theme Designer is a powerful and user-friendly tool for SAPUI5 developers and designers to create visually consistent and branded user interfaces efficiently. By leveraging theme inheritance and visual editing, teams can customize applications to meet unique corporate needs without compromising SAP Fiori’s user experience standards.
Mastering the UI5 Theme Designer empowers you to deliver engaging, professional SAPUI5 applications that enhance user satisfaction and corporate identity.