Setting a Custom Theme for SAPUI5 Standalone

Custom themes can be applied to SAPUI5 standalone applications.

Prerequisites

You have exported your theming files as Zip archive to your local hard disk.

For more information, see Exporting Themes.

Procedure

  1. Create a folder “resources” in your SAPUI5 application.
  2. Extract the contents of the Zip archive containing the theming data into this folder.
    You now have the following options to switch your application to the new theme:
    • Use the SAPUI5 bootstrap configuration.

      You can refer to the custom theme ID in the data-sap-ui-theme attribute of the script tag.

      Example:

      <script id ='sap-ui-bootstrap'
              type ='text/javascript'                        
               src ='resources/sap-ui-core.js'
 data-sap-ui-theme ='my_theme'
 data-sap-ui-libs ='sap.ui.commons,sap.ui.table'></script>
    • Use the URL parameter sap-ui-theme.

      Example:

      https://<host>:<port>/sap/public/bc/ui5_ui5/demokit/test-resources/sap/ui/ux3/Shell.html?sap-ui-theme=my_theme@https://Information published on SAP site<host>:<port>/sap/public/bc/themes/~client-<client>

    For more information, see Loading External Custom Themes.