Create custom theme using SAP Fiori UI Theme Designer

I would like to explain the process of creating 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