The UI theme designer is the browser-based SAP tool for cross-theming scenarios—a single tool for theming and branding key SAP user interfaces. Use it to build your corporate identity themes quickly and easily by modifying theme templates provided by SAP (Community Page).
With the UI theme designer, you can create your own theme for the launchpad running in SAP Business Client for Desktop.
Quartz (Fiori 3) is also supported in the UI theme designer as base theme for SAP Business Client for Desktop.
Prerequisites for using Quartz as your base theme:
Available for on-premise customers with SAP S/4HANA 1909.
The new Quartz theme and the shell header bar are also available for older SAP S/4HANA releases and SAP Business Suite with the SAP Fiori front-end server 6.0.
How to Theme => Step-by-Step
Starting the UI Theme Designer
There are several ways to start the UI Theme Designer in your on-premise landscape.
Business Client connection:
Via the classic Business Client connection type simply enter the transaction /UI5/THEME_DESIGNER in the Business Client Quick Launch.
Figure 1: Enter transaction code into Quick Launch
Fiori Launchpad Connection:
Using the Fiori Launchpad connection type, enter transaction /UI5/THEME_DESIGNER in the Business Client Quick Launch.
You can also open the UI Theme designer via SAP Logon – if you are still using it :-). Also use transaction /UI5/THEME_DESIGNER in your ABAP back-end system.
If you are using the SAP Fiori Launchpad Service (Fiori Launchpad on Cloud Foundry) follow the instructions provided here:
Currently it is not possible to create a custom theme on Cloud Foundry for the SAP Business Client. In this scenario, only the FLP and application pages displayed within the SAP Business Client are displayed in your custom theme, while the shell elements are displayed in the chosen SAP theme. We plan to change this as soon as possible.
Creating a New Custom Theme
Figure 2: Start Page UI Theme Designer
Choose Create a New Theme and select your base theme (I’ve chosen SAP Quartz Dark as my base theme).
Figure 3: Select a base theme.
Adding Target Pages
Here you can enter the URL of an application that runs in the same domain as the UI theme designer.
To create a new theme for my SAP Fiori Launchpad, I add my launchpad URL, for example:
Choose Add. The preview will now appear.
Figure 4: Add your Launchpad
Theming your Launchpad
Start editing your preview at either quick, detailed or expert level
Figure 5: Your Launchpad Preview
Figure 6: Example based on Quartz Dark
When you have finished, choose Theme in the upper left corner and select Save&Build.
Applying your Theme with SAP Business Client
Open your user settings in the FLP (looks different depending on the theme and UI5 versions).
Go to Settings, select Appearance, and choose your theme (custom themes are highlighted/marked with the icon painter’s palette).
Figure 7: Choosing a custom theme for your launchpad