Skip to content

UI Theme Designer

Apply your corporate branding to applications based on SAPUI5 technology.

The UI theme designer lets you apply your corporate branding to applications built with SAP UI technologies. You can make changes to theme templates supplied by SAP to create custom themes that use your own color scheme, background images, and company logo. You can apply a custom theme to various SAP UI clients and technologies. Additionally, you can include your own custom CSS files without having to modify any of your applications.

FeatureDescription
Theming and branding of applications based on SAPUI5 in the SAP BTP environmentCreate your own custom themes based on SAP standard themes, and use them to adapt the visual appearance of your applications based on SAPUI5 to match your company's brand.
Browser-based, graphical WYSIWYG editor with built-in preview pagesChange the values of theming parameters and immediately see what your custom theme will look like when it is applied to an application.
Uploading of custom themes as HTML5 applications to your SAP BTP accountYou can upload your custom themes directly to your account as HTML5 applications.
Automatic upgrade of themes for new SAPUI5 versions.You can upgrade your themes automatically to match the latest version of SAPUI5.
Different levels of theming
  • Quick theming (basic cross-technology theme settings)
  • Expert theming (technolog-specific theme settings)
  • Manual LESS or CSS editing
Color palette for reuseSpecify a set of parameters with the main color values defining your corporate branding.
Control pickerSimply select controls in the preview page to display a list of parameters that can be used to change its appearance.
Cross-technology theming
  • SAPUI5 standard libraries (including SAP Fiori applications and SAP Fiori launchpad)
  • (Experimental): Unified Rendering technologies (such as Web Dynpro ABAP and Floorplan Manager)
  • (Experimental): SAP Business Client

How to get started?

Find relevant SAP Community Blogs.

Use Case Scenarios

Portal Sites

Portal services like SAP Build Work Zone supports the UI Theme Designer out-of-the-box.

Administrators can create a theme in the Portal by launching UI theme designer directly from an SAP Fiori launchpad or freestyle site.

From here you can easily manage your themes and assign them to any site in your subaccount as well as make the themes available for end user selection.

Standalone SAPUI5 Apps

Administrators can assign themes to standalone SAPUI5 applications (without SAP Fiori launchpad).

To use your themes for standalone SAPUI5 applications, you need to configure the individual applications:

Enhance Custom AppRouter xs-app.json file

Map a path to the theming service to be able to use the Theme Designer dashboard and also deliver your custom themes using the runtime service endpoint.

json
"routes": [
    {
        "source": "^/themes/(.*)$", 
        "target": "$1",
        "service": "com.sap.ui.theming",
        "endpoint": "runtime",
    }
]

Launching the Designer

After mapping the UI Theme Designer to your custom approuter and redeploying it to the SAP BTP, you can launch it by appending

/comsapuitheming.themedesigner/

to your service path and create a custom theme for your application.

Running a Custom Theme via a SAPUI5 Bootstrap Configuration

html
<script id="sap-ui-bootstrap"
    src="/resources/sap-ui-core.js"    
    data-sap-ui-theme="custom_horizon"
    data-sap-ui-theme-roots='{"custom_horizon" : "/themes/themeroot/v1/UI5/"}'
    data-sap-ui-versionedLibCss="true"
    data-sap-ui-resourceroots='{"<appName>": "/"}'>
</script>

data-sap-ui-versionedLibCss = "true"

The parameter automatically upgrades your theme for new SAPUI5 versions by adding the following query string to all CSS library requests:

?version=1.96.9&sap-ui-dist-version=1.96.9

The initial requests will trigger the compiler to build the relevant CSS files in the theme runtime (will take some seconds), and follow up requests will deliver a cached version.

Support

Component NameComponent Description
CA-UI2-THDUI Theme Designer
CA-UI5SAPUI5 theme issues
BC-WD-URUnified Rendering theme issues