Theme ​

The theme defines the look and feel of every UI5 control — colors, fonts, paddings, spacings. In a hand-written index.html it is set via the data-sap-ui-theme attribute on the bootstrap script. In abap2UI5 you set it from ABAP:

METHOD z2ui5_if_ui5_exit~set_config_http_get.

    cs_config-theme = `sap_horizon_dark`.

ENDMETHOD.

If you leave the field empty, abap2UI5 falls back to sap_horizon.

Available Themes ​

The themes shipped with current UI5 versions are:

The Horizon themes, the default among them, need UI5 1.102 or later. On an older release — the 1.71 floor, or an old UI5 a system serves itself — set a Quartz theme such as sap_fiori_3: UI5 there has no fallback for a sap_ theme it does not ship, so the page loads no theme stylesheet and the controls render unstyled.

See the official list of available themes for the most up-to-date catalog.

End-User Override ​

The user can override the theme at runtime with the URL parameter sap-ui-theme:

…/z2ui5/sample?sap-ui-theme=sap_horizon_dark

This is convenient for trying out a theme without redeploying.

Custom Themes ​

For brand-specific colors, fonts or logos use the SAP UI Theme Designer to generate a self-contained theme. Host it on your SAP system or any web server, then set cs_config-theme to its theme ID. UI5 loads custom themes relative to the bootstrap src location — if your theme lives elsewhere, register its path with the data-sap-ui-theme-roots bootstrap attribute. A theme on another host is also a host the page's Content Security Policy has to allow: add it to style-src and img-src in your exit — see Customizing the CSP.

See the official theming documentation for the bigger picture.