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:
| Theme name | Description |
|---|---|
sap_horizon |
Default Horizon (light) |
sap_horizon_dark |
Horizon dark |
sap_horizon_hcb |
Horizon high-contrast black |
sap_horizon_hcw |
Horizon high-contrast white |
sap_fiori_3 |
Quartz Light (previous default) |
sap_fiori_3_dark |
Quartz Dark |
sap_fiori_3_hcb |
Quartz high-contrast black |
sap_fiori_3_hcw |
Quartz high-contrast white |
sap_belize |
Belize (older, blue) |
sap_belize_plus |
Belize Plus (older, gray background) |
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_darkThis 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.
See the official theming documentation for the bigger picture.