Many of our customers apply their own themes to SAP applications, to adapt the visual appearance of the apps to transport their corporate brand identity. To do so, SAP provides a single tool for theming and branding SAP’s key user interfaces – the UI theme designer.
With the UI theme designer, you can apply your corporate branding and the visual look to applications built with SAP UI technologies – for instance SAP S/4HANA Fiori apps. It is a browser-based tool for cross-theming scenarios. Use it to easily build your corporate identity themes by modifying one of the theme templates provided by SAP, like the SAP Morning (for light mode) and SAP Evening Horizon theme (for dark mode) template.

With SAP Mobile Start 1.5 and the recently released SAP BTP SDK for iOS 9.0 and SAP BTP SDK for Android 5.1.0 you can apply your UI theme designer definitions also to SAP Mobile Start. Thus, you only need to define your branding once and can then deploy it to your web apps, as well as SAP Mobile Start.

Within this blog, I will quickly show you how to do this in three simple steps. At the end of the blog I will share more insights about how the color mapping from web to mobile is done.

This blog article gives you an overview of this topic to pique your interest. You can find a detailed chapter about theming and a step-by-step guide on how to set it up in our SAP Mobile Start administration guide (iOS / Android).

Concept and scope
Following the idea to do theming only once and then leverage it in multiple apps, you can now export theming definitions from UI theme designer and import it to mobile services. The exported file automatically includes all mobile relevant color definitions, plus your customer logo. SAP Mobile Services then exposes the theming definition to SAP Mobile Start when the user starts the app the next time – and the theming definition will be interpreted by the respective SAP BTP SDK components of the app.

The following items can be themed by you: Customer Logo, Header Color, Tint Color, Label Color, Background Color and Semantic Color. To ensure best user-experience, a light and a dark theme should be provided.

Step1: Export your theme definition from SAP Theme Designer
Open your SAP Theme Designer – for instance from your SAP Build Work Zone, standard (fka SAP Launchpad Service) profile settings. Now you can either create a new theme by copying one of the SAP Evening or SAP Morning Horizon Theming templates or select a given theme you want to use for SAP Mobile Start. Remark: It has to be based on the Horizon templates.

An always updated list of customizable UI elements of SAP Mobile Start can be found in the documentation (iOS nd Android).

Then export the theme (Theme –> Export) to your hard disk. You can use the standard settings of the export menu. Please keep in mind to provide a light, as well a dark theme.

Screenshot: UI theme designer – Export of theme

For further information on the UI theme designer, please check the following page: UI Theme Designer for the Cloud Foundry Environment.

Step 2: Import your theming into SAP Mobile Services
Open the respective mobile services instance that is used by your SAP Mobile Start. You find the theming section under “Mobile Settings Exchange” – at the very end of the screen. Here you can start the upload menu by clicking on the upload button (right lower corner).
Hint: Please check the following blog if you do have questions about how to open your SAP Mobile Services Admin cockpit.

Screenshot: SAP Mobile Services – Settings Exchange

Now, you upload your light and dark theme from your hard disk.

Screenshot: SAP Mobile Services – Upload theme

Hint: You can easily update it anytime without disrupting the user from here. When the user starts the app the next time, the updated theme will be applied. That´s all you need to do.

Screenshot: SAP Mobile Services – Uploaded light and dark theme

Step 3: Enjoy your own visual theming with SAP Mobile Start
When you start SAP Mobile Start the next time, the new theming will be applied automatically.

Screenshot: SAP Mobile Start – without and with applied theme

Further insights

What can be themed and how is the mapping between web and mobile done?
A customized theme is comprised of multiple visual elements. To create your own theme, you can customize the following theme-able elements: Customer Logo, Header Color, Tint Color, Label Color, Background Color and Semantic Color with the UI theme designer. You can decide if you only want to apply a basic theme (Logo and Tint color) or a detailed theme. To enable the theming of mobile apps with UI theme designer, the respective colours have been mapped to the color of mobile. For further details on the mapping, please check the SAP Fiori Guidelines for mobile theming (iOS and ANDROID)

The graphic below shows the them-able elements of SAP Mobile Start and the respective mapping to the UI theme designer parameters.

Screenshot: Them-able elements SAP Mobile Start

Screenshot: Mapping of them-able elements to UI theme designer

Tip: Please consider “accessibility requirements” when you do your theming. Please check the Fiori for iOS and Fiori for Android Design Guidelines regarding accessibility of colours if you have any doubts.

What does this mean for other mobile apps, besides SAP Mobile Start ?
As SAP Mobile Start is part of the SAP Build Work Zone standard edition (fka SAP Launchpad service) that includes mobile services, it uses a single application cockpit of mobile services (Software as a Service) and the theming is applied directly in the respective dedicated instance of mobile services.

To leverage the branding feature for your applications, other than SAP Mobile Start – like other SAP or your custom apps, please check out the blog of my colleague Meike Wietkamp:  Branding and Theming for Mobile Apps

I hope you enjoyed the blog and the new branding feature. With SAP Mobile Start 1.5 we support a first set of them-eable UI elements and are looking forward receiving your feedback on this new features.

Stay up to date with latest news and post your questions or feedback about SAP Mobile Start in the Q&A area. Start by visiting your SAP Mobile Experience community page and click “follow”. We’ll be publishing more informative blog posts.

Want to be notified? Check your profile settings to ensure you have your notifications activated.