Hello everyone, 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 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.
1. Launch the UI Theme Designer with the transaction code – /UI5/THEME_DESIGNER
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 custome 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.