Prerequisites

In order to use the SAP Ui Theme Designer, you need a SAP Cloud Platform subaccount or a SAP Cloud Platform Trial Account (SAP Cloud Platform Trial).

Note: Using the Theme-Designer with a trial account severely restricts its preview functionalities and hence customizing your application is significantly limited. We recommend using this guide to alter the design of your application by editing CSS classes directly.

It is mandatory and of utmost importance to use the appropriate UI5 version for your theme that matches the one being used for the deployment of your application. 

Choose a Subaccount

In the SAP Cloud Platform Cockpit select a subaccount to work with:

Subscribe to SAP Build Work zone, Standard Edition

Click on the Instances and Subscriptions in the side menu. Click on the create Button in the top right corner and search for SAP Build Work zone, standard Edition in the input field for Service and select standard (subscription) for the Plan input field.

Assign Launchpad Admin Role

Select Role Collections on the side menu and click on Launchpad_Admin to open the role page and click on the edit button to add a new admin.

Note: If you plan to add custom styling rules using CSS, assign the role Launchpad_Advanced_Theming to your account in the same manner.

Start SAP Build Work Zone

Navigate back to Instances and Subscriptions and click on SAP Build Work Zone, standard Edition. Then click on Go to Application.

Create Website

In order to use the Theme Designer, we need to create a website and open it.

Open the website:

Open Theme Designer

Open the website menu by clicking the account icon and select Theme Manager and click on Launch Theme Designer.

Selecting Control Previews

Click on SAPUI5- Control Preview and select all control elements you need.

Exporting a theme

When you are satisfied with your new theme, click on Theme in the top left corner and select export.

In the Export window, expand the optional settings and select Source Code + CSS Resources + Base Theme and deselect Unified Rendering.

Importing a theme 

To import a theme, click on Theme in the top left corner and select import.

In the import windows, upload the theme .zip file.

FAQ

Where can I change the SAPUI5 Version number?

On the themes overview page click on the version number in the top right corner and select your desired version number.

How do I find the SAPUI5 Version number for my theme?

In your exported .zip file there is a JSON file called exportThemeInfo.JSON. Open this file with a text editor of your choice to see which SAPUI5 Version was used.

How do I find out which base theme my theme is based on?

In your exported .zip file there is a JSON file called exportThemeInfo.JSON. Open this file with a text editor of your choice and search (strg+f) for “extends”, to see which base theme your customized theme extends.