Neptune Theming

Neptune DXP - SAP Edition separates theming for Fiori apps and layouts for Launchpad & Mobile Clients. Layouts can be customized by adding one or more based on an SAP or custom UI5 theme, allowing for mixing different themes with different layouts.

SAP delivers different UI5 themes, that change the look and feel of your UI5 applications.

Fiori 1 (UI5 v.1.38) introduced the Blue Crystal theme. The Blue Crystal theme is not supported if you use a version of UI5 higher than 1.38. It can still be used, but expect the unexpected UI behavior.

In Fiori 2 (UI5 v.1.44, 1.52 & 1.60), the Belize theme was introduced. A plus version of the theme became available later. SAP also added the High Contrast White and High Contrast Black theme for use in apps that support visually Impaired users.

Fiori 3 (UI5 v.1.71) introduced the Quartz Light & Quartz Dark themes. Custom UI5 theme based on Quartz Dark can only be done with UI5 v.1.84 and above.

In 2022 the Horizon themes were introduced. The light version is named Horizon Morning, the dark version is named Horizon Evening. The Horizon theme also has high contrast version for accesibility usage.

You can create your own UI5 themes based on one of the these UI5 themes in both a light & dark flavour and also different high contrast version for each theme:

You’ll find the SAP Theme Designer in the SAP Business Technology Platform.

Read more about how to Access the SAP UI Theme Designer

When creating a theme for your Neptune Launchpad or Mobile Client, it is important to choose a UI5 version that matches the version you have chosen for your launchpad or mobile client. For example, if you create a theme based on Quartz Light and use it in a launchpad with a UI5 version below 1.71, the theme will not be included in the files loaded into the browser.

Choosing UI5 version in the theme designer:

Creating new theme and choose the SAP base theme:

Applying all your changes to your custom theme:

When you are happy with the theme, you need to export it. When you export the theme it’s important that you choose the below settings:

When the SAPUI5 Theme has been exported, you can import it into the Cockpit and use it in your applications and launchpad layouts:

Neptune DXP - SAP Edition lets you add SAPUI5 or Custom UI5 themes to your launchpad Layouts for flexibility. Themes add CSS styles to your Neptune applications and launchpads. You can create a layout and apply a theme to get a good-looking launchpad. You can also add multiple layouts to each launchpad and mobile client. Each layout is based on a UI5 theme, allowing for a consistent look and feel and customizing your experience to match your business profile easily.

Read about how to create Neptune Layouts at Launchpad Layout

This passage highlights the ability to create visually appealing Neptune Launchpads and Mobile Clients by using custom UI5 themes and launchpad layouts. The example provided shows a launchpad with layouts based on UI5 1.71 and the Quartz Light. No additional customization has been done, and all colors come from the chosen themes: