Skip to Content
Author's profile photo Ole-Andre Haugen

Theming your Neptune UI5 App with SAP Theme Designer

The ability to add brand colors and other simple design features to an app can be very important for SAP customers. Let’s face it, employees are normally more loyal to their employer than their software vendor.

So even if the BlueCrystal theme from the SAP is great, it would be nice to have a simple way to change basic branding features.

Last time I was in Waldorf I met with Andreas Kunz and Frederic Berg and they showed me the new SAP on-demand Theme Designer and that was exactly what we were looking for.

At Neptune Software we have embraced the new UI5 framework from SAP so obviously we decided to integrate this feature into our designer.

This feature was released in our support package 2 of the 2.20 release of the Neptune Application Designer. To be able to use this feature with the Neptune Application Designer please update the Neptune Developer Role as well.

There is a new folder in the Role called Theme and it includes both a link to the Theme Designer from SAP and import function for Neptune:


The UI5 Theme Designer link will take you to the SAP site (You need to have an S-User here):


There are some different ways to use this tool. One way that works well is to test out one of the standard applications included as examples and see how your design will look and feel using the preview function:


You can now start changing the Theme. Use the Help link for information about the usage and test out the Quick, Expert and CSS options. Here is an example of a Neptune branded UI5 App:


When you are done designing, choose the Theme dropdown menu and select export:


Choose name id and vendor for your package and save it to local disk:


Unzip the downloaded file to a directory and go to the import transaction in the Neptune UI5 Theme Import:


After running the import you will be prompted for a transport request:


If the theme already exists you will be asked if you wish to update:


You will now be able to choose the new theme in the Neptune Application Designer theme tab:


Now you can preview your new themed App:


Design and theme away with your Neptune apps, it has never been simpler!

Read more about the SAP UI Theme Designer here.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      This a really good new feature in the SP2 but there are many more 🙂

      Author's profile photo Anuradha Wijesinghe
      Anuradha Wijesinghe

      Is it Compatible with SAP GUI ??

      Author's profile photo Former Member
      Former Member

      No, it will only work with SAP UI5 applications. Neptune Application Designer runs in the SAPGUI but the applications that are themed will only work on browsers or as Hybrid Apps.


      Author's profile photo Luca Grilli
      Luca Grilli

      Great, we've already started to import NAD 2.20 with SP2 🙂

      Very important feature.

      Author's profile photo Fabio Di Micco
      Fabio Di Micco

      Great new feature in this SP2!!! this feature is very helpful, especially when customers don't like the BlueCrystal theme 😉

      Thanks for sharing


      Author's profile photo Former Member
      Former Member


      The creation of a simple theme in the Theme Designer is easy and the import into Neptune works very well. But I want to go a little bit deeper and manipulate the base LESS attributes like @sapUiText or @sapUiButtonBackground.

      But I can't get that to work. First I'm missing a list of LESS attributes, if I look in the library.less source code on github, I find a lot of attributes. But how can I manipulate them in the CSS tab in the Theme Designer?

      I want to be able to do something like this:

      @sapUiButtonBackground: #FF55EE;