Show TOC

Setting ThemesLocate this document in the navigation structure

SAPUI5 offers three different ways in which a theme can be set.

For end users, applications can offer arbitrary ways of selecting or switching themes, based on the technical theme switching functionality offered by SAPUI5.

To define a theme and to switch it inside an application, you have different options.

  • The initial theme can be hardcoded in the application (in the HTML script tag loading SAPUI5) or in a JS configuration object defined before SAPUI5 is loaded. This setting has the lowest priority.
  • A URL parameter (for example: html?sap-ui-theme=sap_bluecrystal) can be used when starting a SAPUI5 application to set or override the initial theme.
  • A JavaScript API (sap.ui.getCore().applyTheme("sap_bluecrystal")) can be used to switch themes on the fly. The application state is not lost, there is no server roundtrip (except for loading the CSS, if not cached), only the stylesheets are exchanged.
Listening to ThemeSwitch-event

Whenever the theme is switched, an event is thrown indicating that there was a theme-switch triggered. If you want your application to be responsive to this event for whatever reason, you can use the following callback:

sap.ui.getCore().attachThemeChanged(function(){;
	myFunction()
});