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.UI Theme Designer 13. To create a new theme, choose any one of the standard theme and hit Open.

UI Theme Designer 2

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

UI Theme Designer 3

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

UI Theme Designer 4

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.

UI Theme Designer 5

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

UI Theme Designer 6

8. In Theming and Parameters Area, choose Quick theming

UI Theme Designer 7

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

UI Theme Designer 8

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

UI Theme Designer 9

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

UI Theme Designer 10

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

UI Theme Designer 11

13. Custom theme build process will begin

UI Theme Designer 12

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.