Applying Custom theme to UI5 Application

Normally SAP UI5 application has default themes blue_crystal and gold_reflection themes.But If want to apply different theme, You can create one theming file and directly can apply the same to App. This will reduce lot of time and effort spending in css to achieve the same.

The steps to apply custom theme follows

1. Create folder resources into WebContent folder
2. Custom theme file will have the following structure

3.     We need to upload the content of UI5 subfolder into resources

4.Create one folder called resources into your webContent folder. and copy above files into it.Structure will look like the below screen

5. Change the theme name from sap_bluecrystal to CustomTheme in index.html

<script src=“resources/sap-ui-core.js”

                        id=“sap-ui-bootstrap”

                        data-sap-ui-libs=“sap.m”

                        data-sap-ui-theme=“CustomTheme”

                        data-sap-ui-xx-bindingSyntax=“complex”

                        data-sap-ui-resourceroots=‘{

                        “util” : “./util”

                 }’>

          </script>