Skip to content

Theme

The theme defines the look and feel of every UI5 control — colours, 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:

abap
METHOD z2ui5_if_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:

Theme nameDescription
sap_horizonDefault Horizon (light)
sap_horizon_darkHorizon dark
sap_horizon_hcbHorizon high-contrast black
sap_horizon_hcwHorizon high-contrast white
sap_fiori_3Quartz Light (previous default)
sap_fiori_3_darkQuartz Dark
sap_fiori_3_hcbQuartz high-contrast black
sap_fiori_3_hcwQuartz high-contrast white
sap_belizeBelize (older, blue)
sap_belize_plusBelize Plus (older, grey background)

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

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 colours, 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 and point cs_config-theme to its theme ID (the bootstrap source must reach it via the standard UI5 theme loader).

See the official theming documentation for the bigger picture.