Skip to Content
avatar image
Former Member

SAP Fiori Theme Designer - App-specific Theming

Hi all,

I have a question about the creating of SAP Fiori themes.

Is it possible to create a specific theme for each Fiori application?

We implemented among others the SAP Fiori App "My Leave Requests" and "My Team Calendar".

Currently we want to change our corporate SAP Fiori theme with the CSS editor, because the current colors don`t match with the SAP Fiori App "My Leave Requests".

So far everything worked. But the problem is, that of course the new theme apply to all other SAP Fiori apps and the new colors don`t match everywhere, for example in the SAP Fiori App "My Team Calendar".

Is there any chance to create a application-specific theme?

Thanks a lot!

Best regards

Maximilian Haala

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

3 Answers

  • Best Answer
    Apr 05, 2016 at 04:02 PM

    Hi Maximilian,

    Some apps have a manifest.json file where you can change themes.

    For others you can change the component.js file

    BUT, the theme should be the same for all apps, if you don't explicitly change it inside the app. There is a Fiori design principle called "Coherence" in which all apps should look the same. So it's better to select one theme as the default and use it for all apps. It can be the case where you want to use more than one theme depending on the user, in that case you can use the "sap-theme=<theme ID>@<theme-root>" paramter in the launchpad url.

    Check out transaction /n/UI5/THEME_TOOL to get theme ids and theme roots.



    manifest.PNG (24.6 kB)
    component.PNG (36.3 kB)
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 06, 2016 at 01:31 AM

    Hi Maximilian

    Is there some reason why you haven't used the standard tool UI Theme Designer for your corporate theming?

    The UI Theme Designer is the correct and standard provided tool for applying corporate theming to ensure coherence across all apps - both custom apps and standard apps - available for all unified rendering apps - so it covers you for Fiori and Web Dynpro ABAP and other scenarios as well.

    I agree with Leonardo - app specific theming is dangerous as it breaks the principle of coherence. Lack of coherence degrades user productivity.

    By the way, you should always permit users to choose High Contrast Black theme in addition to your corporate theming. This is also for productivity reasons and to ensure you are providing a UX that works for as many people as possible - e.g. to cope with issues such as colour blindness (8% of males) and low vision (e.g. ageing workforce, shift workers, late night work etc.).



    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 06, 2016 at 07:20 AM

    Thanks for the very helpful answers!

    @Jocelyn: We already used the SAP Fiori Theme Designer for creating our corporate Fiori theme. I meant the CSS editor inside the Theme Designer 😊

    But I have an additional problem....

    I published the new changed SAP Fiori Theme with the Theme Designer and set it as the standard theme with the TA /UI2/NWBC_CFG_CUST.

    Then I cleared the Gateway cache (TA /iwfnd/cache_cleanup), the UI cache (TA /UI2/DELETE_CACHE) and the browser cache. But somehow the changes of the theming don`t appear in the SAP Fiori App.

    Is there anything addintional I have to consider? Is there any trick?

    Would be very helpful! Thanks.

    Best regards


    Add comment
    10|10000 characters needed characters exceeded