Loading External Custom Themes

You want to use a theme that is not at the same location as the default libraries, you need to tell OpenUI5 where to find it.

Context

You set this theme either by static declaring in the page or by using the Core.setThemeRoot() method. This is very much like using registerModulePath() for libraries that are at a different location.

Procedure

To define the path to the theme, add the following code: sap.ui.getCore().setThemeRoot("my_theme", "http://url.to/the/root/dir");

This will cause OpenUI5 to load all theme resources from below this URL, for example the library.css file of the sap.ui.core library will be loaded from: http://url.to/the/root/dir/sap/ui/core/themes/my_theme/library.css
- For easier usage this base directory can also be given as second argument to core.applyTheme(...) .
If some parts of the theme are at are at different locations than others, you can use the above call to set the default, but override the theme location for specific libraries by specifying them in an array as second parameter: sap.ui.getCore().setThemeRoot("my_theme", ["my.lib.one","my.lib.two"], "http://url.to/the/other/root/dir");
To statically configure the theme, you can use the global configuration object. Insert the following before the OpenUI5 bootstart script tag:
```
#!js
<script type="text/javascript">
window["sap-ui-config"] = {
	themeRoots : {
		"my_preconfigured_theme" : "http://preconfig.com/ui5-themes",
		
		"my_second_preconfigured_theme" : {
			"" : "http://preconfig.com/ui5-themes",
			"sap.ui.core" : "http://core.com/ui5"
		}
	}
}
</script>
```
The first theme is completely at one location, while the second theme has the default location changed plus the location changed for the part of the theme that covers the sap.ui.core library.
- Or it can be done (using the same object structure as JSON string) in an attribute of the OpenUI5 bootstrap script tag, for example:
```
#!js<script id="sap-ui-bootstrap" 
	type="text/javascript"
	src="......../sap-ui-core.js"
	data-sap-ui-theme-roots='{"my_theme" : "http://themes.org/ui5"}'>
</script>
```
- Last but not least, the location of a theme can be specified with a URL parameter:
```
http://myserver.com/sap/myapp/?sap-ui-theme=my-theme@/sap/public/bc/themes/~client-111
```