How to create custom theme using SAP Fiori UI Theme Designer


Dear SAPLearners, in the blog post we will learn how to create custom theme in SAP Fiori UI Theme Designer.

Before going further, if you would like to know basics of UI Theme Designer you can check these blogs.

Custom theme

Custom theme is a new theme created based on SAP standard theme which includes visual appearance changes needed by customer.

SAP standard theme + your branding changes = custom theme

Customers who adapts SAP Fiori Launchpad as their business user interface would like to adapt the visual appearance to their corporate branding.

UI Theme Designer can be used to meet their theming and branding needs.

Lets see how we can create a custom theme using UI Theme Designer.

Step-by-Step Procedure

1. Launch the UI Theme Designer with the transaction code – /UI5/THEME_DESIGNER

2. Below screen will be launched in a browser window with all available themes in the system.3. To create a new theme, choose any one of the standard theme and hit Open.

4. Click on Add Target Page to add the target pages for theming.

5. Choose SAPUI5 Application Previews from the list of Test Suites available.

6. A new screen will be displayed like below, then select SAP Fiori Launchpad. After selection, it will be added to Target Pages section like below.

7. Now select the SAP Fiori Launchpad which is under the Target Pages section. SAP Fiori Launchpad preview will be seen like below.

8. In Theming and Parameters Area, choose Quick theming

9. Now we are going to change the quick theming parameters Brand Color, Background Gradient Color, this will change the background color of the SAP Fiori Launchpad.

Choose different colors for these parameters using color palette available beside to the input. Sample example like below

10. You can also apply background image and change the company logo like below

11. To save the custom theme, navigate to Theme → Save & Build.

12. On Save & Build dialog box, provide Theme ID and Title and hit Save & Build.

13. Custom theme build process will begin

Congrats.! 🙂 you have successfully created a custom theme using UI Theme Designer.

In our next tutorial you will learn how to add the custom theme to the SAP Fiori Launchpad.

Please stay tuned for more SAP Fiori Tutorials and feel free to let us know comments and feedback.

mail is now on Telegram. Click here to join our channel and stay updated with the latest tutorials and updates.

Like us on Facebook and follow us on Twitter.