Using the UI5 Theme Designer

The UI5 Theme Designer provided by SAP allows you to create and customize the theme for all your Fiori applications.

On the Gateway system, you can use transaction code /UI5/THEME_DESIGNER to create new themes from scratch or from a copy of an existing theme.

A tutorial on the themes designer can be found here: https://blogs.sap.com/2013/09/19/create-and-apply-custom-theme-to-sapui5-application/

You can follow the instructions from the tutorial above to manually download and include the theme in your application using Eclipse, WebIDE or other mechanism.

To instruct your application to use another theme, you will use the sap-ui-theme URL parameter.

e.g. sap-ui-theme=custom_platinum@http://[GatewayServer]:[GatewayPort]/sap/public/bc/themes/~client-[ClientNumber]

The full URL will be something like the following:

http://[GatewayServer]:[GatewayPort]/sap/bc/ui5_ui5/iqx/fab2/index_latest.html?sap-ui-appcache=false&interactive2=true&showlogoff=true&sap-ui-theme=custom_platinum@http://[GatewayServer]:[GatewayPort]/sap/public/bc/themes/~client-[ClientNumber]#StartForm/[ApplicationName]/_newForm

Alternatively, you can apply a Theme programmatically in your app using the line of JavaScript code shown below. In this case it is used to apply the “SAP Quartz Light” (technical name sap_fiori_3) theme:

sap.ui.getCore().applyTheme("sap_fiori_3");

For a list of SAP themes supported by your current SAP UI5 version, please refer to this page:

Supported Combinations of Themes and Libraries