Skip to Content

Create and Apply Custom Theme to SAPUI5 Application

What’s new
  • Update [2013-12-09] – Cloud based Theme Designer Tool

Introduction –

In this blog, we will see how we can create custom theme using Theme Designer tool and then how we can apply it to SAPUI5 application. You can also refer below SAP help documentation. There are few steps which are not clear while reading SAP Help documentation and hence I thought to share detailed steps in this blog.

References –

Steps –

Start theme designer using transaction /UI5/THEME_DESIGNER in backed SAP system. It will open web application with below URL https://<hostname>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

Open this URL in chrome browser or Firefox or IE9. It will show below screen to select existing SAP provided themes as starting point. Select sap_goldreflection theme as template theme and click on Edit button.


Now select UI5 Control Previews and add various controls.  As per SAP help documentation, I will select Shell UI element.


You can see the original and preview for added UI element along with the Quick, Expert and CSS tab on right hand side.


As displayed below, I changed the color of various properties under Quick tab. Also I will add company logo image.


After changing color properties and adding company logo, preview of the application will look as below.


To save theme as draft, we need to select option Theme –> Save Draft as displayed below.


We can publish theme with option as Theme –> Publish


It will show below screen. Provide the required details and click on Publish.


Now custom theme is ready and we can play with different UI controls and the effect of new theme on UI elements.

Let’s add UI elements as Accordion, ApplicationHeader, TabStrip, Shell etc.


ApplicationHeader – Original


ApplicationHeader – Preview


TabStrip – Original


TabStrip – Preview


Shell – Original


Shell – Preview


We can also add any SAPUI5 applications which are deployed to SAP application server to see the effect of custom theme. As displayed below, provide the link (Application URL) and name of the application and click button Add.


The preview will show the application in custom theme.


Let’s see how custom theme can be applied to standalone SAPUI5 application. To do that, we need to download the custom theme from backed SAP system.

Download theme using transaction /UI5/THEME_TOOL.


Once it is downloaded, zip file will be created with below kind of sub-folder structure.


We need to upload the content of UI5 sub folder.


We need to create folder resources and there upload sub-folders sap, ui and uiext.


Apart from this change, Change the theme name from sap_goldreflection to custom theme cm_sap_goldreflection which is assigned to data-sap-ui-theme.

<script id=‘sap-ui-bootstrap’ type=‘text/javascript’           





Below is the screen of the application with standard theme sap_goldreflection.


Below is the screen of the same application after applying custom theme cm_sap_goldreflection.


Note: We can also apply custom theme to SAPUI5 standalone application using URL parameter as explained below.

There is other way to apply theme with URL parameter. For deployed application, we need to add theme parameter sap-ui-theme=<custom_theme_id>@t<theme-root>

For e.g. Shell demokit application URL will become as below,



Below is the screen of custom SAPUI5 application which is deployed to backend SAP Application server.


Closing Remarks –

With Theme designer tool, we can easily create/edit custom theme and change the look and feel of SAPUI5 application as per our company branding theme.

Theme designer tool can be used to create custom theme for SAPUI5 (Desktop and Mobile Applications), Webdynpro ABAP and NWBC.

Your comments/suggestions and experience on this topic are most welcome!

Update [2013-12-09] – Cloud based Theme Designer Tool –

You can access cloud based UI theme designer tool at provided you have proper credentials etc.

Once your theme is ready with this tool, you can export it using  menu path Theme–>Export and can use the exported theme in your SAPUI5 application as explained earlier in this blog.

You must be Logged on to comment or reply to a post.
  • Thank you for sharing.


    I'd like to know what is the proper way of using custom theme from inside SAP backend system when sapui5 application is bsp-page.

    The way you've mentioned (data-sap-ui-theme='cm_sap_goldreflection' )  doesn't work for me





  • Hi Chandra,


    Do you have an idea about applying custom themes to SAPUI5 applications residing on the ABAP server?


    I tried to copy the theme folders within the standard create leave request app (which I downloaded from the ABAP server from SE38 and copied its content to a newly created SAPUI5 app in Eclipse) and submit the application to ABAP. But here I faced synchronization errors for multiple files within the theme folder like


    File ...../.theming could not be submitted

    End of line marker not supported, please use CR+LF


    and the application does not get uploaded to the ABAP system. Have you tried doing this yet?

    • Hi Saurabh,


      you need not to copy theme folder to your UI5 project. you can apply the theme to deployed application using url parameter which will look something like below,






      • Hello Chandra,


        I have tried adding the sap-ui-theme URL parameter as you mentioned and it is working fine. But I wish to apply the custom theme to my stand alone SAPUI5 application globally as you have mentioned in the blog. Users should see the custom theme when they open the application without the need to explicitly add the sap-ui-theme parameter.




        • As per sap document how to apply custom branding , we need to be careful on <theme root>. The <theme root> specified in development document specified as  " https://<Theme server>:<theme port>/sap/bc/theming/themes/~client-<client number>", which is not correct. The correct <theme root> is "https://<Theme server>:<theme port>/sap/public/bc/themes/~client-<client number>"


          For example


          http://<App servername>:<App Port>/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&sap-theme=greenorangetheme@https://<Theme server>:<theme port>/sap/bc/theming/themes/~client-100


          This is not correct.


          http://<App servername>:<App Port>/sap/bc/ui5_ui5/sap/ui5_mm_po_apv/index.html?sap-client=100&sap-theme=greenorangetheme@https://<Theme server>:<theme port>/sap/public/bc/themes/~client-100


          This is correct.







  • Hi Chandra,


    When I try to load that URL, I am not getting that Available themes. It displays Theme Repository could not be read!


    It ould be greatful if u can help me in fixing this issue.



    Balajee B

  • /
  • Hi Chandra,

           I created a application by sapui5 in Eclipse , it's theme not work which run as 'abap server',

             but it's ok which run as  'web application preview' in Eclipse.


             why is this?

            Hope to help me




            1、run as 'abap server'



        2、run as 'web application preview' in Eclipse


  • /
  • Hi Chandra,


    This is a great post. I followed steps and created a customized theme based on sap_bluecrystal theme and it worked great on version 1.18.9.


    Yesterday, I upgraded the UI5 commons, core, themelib_sap_bluecrystal and .m library to version 1.22.4 due to UI5 control bugs, I found the customized theme no longer works, the action sheet text is gone, tiles no longer shows up.

    But if I switch back to standard sap_bluecrystal, actionsheet and tiles etc. shows up again.


    This is really strange, do you experience the same issue?


    Any suggestions will be greatly appreciated.


    Thank you,


    • Hi Siyu,


      Sorry but I have not tried it as you mentioned. You can execute your application and try to open developer console in chrome browser (F12) and check what errors are you getting. I guess may be some CSS related files got changed with 1.22 which might be causing the issue.




  • Hi


    Great Blog and I was really looking forward to developing a theme however I get a serive error - I open the U15 THEME_DESIGNER and slect the gold theme.  On the left the shell is only found in the application preview so I click on the check box and then Shell appears on the left as a word.  I click on the word and i get the service error in the middle pain as shown below.... (i notice under SICF transaction I can goto sap>bc>theming and there is no lower entry - the error seems to be looking for sap>bc>theming>themes ???)



    the url of the main page is




    the url it is showing in the error page is




    Any ideas what is happening here?

    NWBC 4.0 PL13 and IE9 (its the same on chrome and FF)

  • Hi Chandra,


    I am trying to create a custom theme but I am not getting the EDIT button. Also, If I am selecting the theme then it is asking for application URL.


    Is it related to authorization issue?


    Could you please help me with the same.




  • Hi Chandra,


    Documentation looks good & easily understandable. Thanks for sharing.


    I have a question. When I login into theme designer page. All the themes are set to lock. I cannot see edit button any where. Can you please advise.




  • Hi Chandrashekhar,

    thank you for this information!


    You wrote:

    We need to create folder resources and there upload sub-folders sap, ui and uiext. [..]

    Apart from this change, Change the theme name from sap_goldreflection to custom theme cm_sap_goldreflection which is assigned to data-sap-ui-theme.

    Is there no option without modifying an app?

    For Fiori Apps it is enough to add the new theme via transaction /o/UI2/NWBC_CFG_CUST. Or is this Customizing not used for SAPUI5-Standalone (non-fiori) apps?

    Thanks and regards,


  • /
  • /
    • If you are getting error "HTTP Status 400 - Possible XSRF attack: no valid xsrfProtection parameter was found" then follow this note as mentioned in the document UI Theme Designer Developer Center

      Note: If the error "HTTP Status 400 - Possible XSRF attack: no valid xsrfProtection parameter was found" is returned when you try to open the link above, go to, click "Log on", and accept the terms and conditions. If you now reload the UI theme designer application, the error should no longer be displayed.




  • hi Chandra,

    from your post: "Download theme using transaction /UI5/THEME_TOOL." . I assume I have to use SAP Logon to connect suitable system then execute transaction but I have no idea which system you're mentioning to. Would you please help?

    Thanks a lot,


  • /
  • Hi Chandra,

    I customized a theme for SAPUI5 application which is uploaded in Gateway system. The theme is reflecting fine with Theme Parameter which I got from /UI5/THEME_TOOL. I modified the SAP_FLP parameter value from sap_bluecrystal to <my custom theme ID>.

    When I am accessing the application without theme parameter, my custom theme is not loading.

    One more thing that I tried, I downloaded the .zip file from /UI5/THEME_TOOL, kept in the application and changed the theme name in .index.html. But still custom theme is not reflecting.

    Is the SAP_FLP parameter is only for FIORI launchpad..? Why the downloaded .zip file is not working..?

    Please suggest me further..




  • Hi Chandra,


    Your blog is really helpful. I am trying to apply custom theme on extended app.


    I created a new extension of standard app using SAP Web IDE, Default theme defined in  index.html is "sap_bluecrystal" now if user will go to Fiori launch pad-> user preferences and change theme to some new custom theme, How we can apply new theme to extension project automatically?


    I am facing issues to apply custom theme on extended application only.


    Please suggest.



  • Hello Chandra,


    I need to extend the GoldReflection theme , however I am not able to edit the default themes, getting a message that , these themes are read only. Does it have anything to do with user profile(authorizations / roles ) ?


    Please suggest.




  • Hi, has anyone noticed that the "High Contrast Black" theme (sap_hcb) works nicely with all other controls, but not with button (sap.m.Button) ?
    The background/text color is not changed... any ideas how to get it work?


  • hi Chandrashekhar,

    when i open the sap folder under UI5 folder, i find a ui folder but not uiext like you showed. also, when i try to upload a folder, it just go inside her as it wants to upload a file and not a folder, should i create a zip file of the folder and upload it?

  • Hi, Chandrashekar,

    It was a very helpful blog on theme designer and custom theme designing.

    I tried to create the custom theme by following the same steps that you mentioned in this blog, I am able to create a new custom theme from the blue crystal theme.

    But I have a small problem with the custom theme, we are using very old UI5 library version, that is 1.20. And the theme we are using now is also a custom theme. I tried to apply the new library version with the current theme, It won't work as expected. But when I try to apply the old version/new version with standard sap blue-crystal theme it looks good. Again when I apply our custom theme with the new library version it won't works as expected.

    I tried to copy the current CSS file logic into the newly created theme, still, I am facing the same issue in loading the theme.

    If I apply the same old UI5 version with the blue-crystal it works as expected with blue-crystal, when I create a custom theme from standard blue crystal theme and apply that theme, it acts weird.

    Could you/anyone help me on this issue?

    Help would be very much appreciated.

    Thanks in advance.