Before After
Before you get started, you will need the necessary tcode to access the theme designer. This code is:
use/n/UI5/THEME_DESIGNER
With this code, your team will be able to create, edit, copy, delete, or rebuild and upgrade a theme.
To begin making edits, log in to your ABAP front-end server.
Next, you can run transaction/n/UI5/THEME_DESIGNER to open the UI Theme Designer.
After doing so, select a theme and click open.
It is important to remember that you can only create a custom theme from an existing base theme. For example, our team at ConvergentIS started with the SAP Belize theme before creating a new theme.
Once you have selected your base theme, you will need to give your new theme a name and a technical ID (you can always come back and do this later).
When you are ready, you can hit “Create Theme.”
Select the file from its storage location. Once locate, upload and hit the “OK” button. This will replace the logo in the top left corner of the SAP logo with the logo of your company.
If you aren’t sure what your corporate colours are, navigate to your company website.
Highlight a button or text that uses the colour, then right-click and select “Inspect Element.”
Find the hex code – it will start with a # and have a combination of letters and numbers. For example, our ConvergentIS blue colour is hex code #005b96.
The hex code can now be added under the “Main” section to be used throughout the theme. You can include the hex code under “B brand colour” if you would the colour displayed in foregrounds for selected and active elements (typically a strong colour). The base colour can be used for backgrounds and should typically be a lighter colour. Additional colours may be added to the highlights section. A background image that reflects your theme colours may also be uploaded.
We recommend using the “Quick” section of the Theme Designer. It’s easy to use and lets you make the most (if not all) of your desired changes.
Finally, you will need to activate your new theme. This can be done by clicking the profile icon on the top left of your SAP Fiori launchpad. Next, navigate to “Settings” and click “Appearance.” This will open your saved themes, including the updated theme that your team has created. Select the one you would like to change it to and hit save.
Looking for configurable, out-of-the-box Fiori applications to streamline your business processes? We encourage you to check out our app catalog. These solutions will not only accelerate your current business processes but will also look great with your updated SAP Fiori launchpad!