要加载外部自定义主题，开发人员可以通过在页面中静态声明或使用 Core.setThemeRoot() 方法来设置此主题。
这非常类似于对位于不同位置的 SAP UI5 库使用 registerModulePath()。
下面是具体的操作步骤：
(1) 使用下面的代码告诉 SAP UI5 框架，我们自定义 theme 的地址。
sap.ui.getCore().setThemeRoot("my_theme", "http://url.to/the/root/dir");
SAPUI5 然后从该 URL 加载所有主题资源。 比如sap.ui.core库的 library.css文件，在上述代码执行之后，就变成：
http://url.to/the/root/dir/sap/ui/core/themes/my_theme/library.css
base directory 也可以通过 core.applyTheme(...) 方法的第二个参数指定。
如果 theme 的某些部分位于不同的位置，可以使用上面的调用来设置默认值，但通过在数组中将它们指定为第二个参数来覆盖特定库的主题位置：
sap.ui.getCore().setThemeRoot("my_theme", ["my.lib.one","my.lib.two"], "http://url.to/the/other/root/dir");
下面是不同的设置 theme 的实现方法：
(1) 在 SAPUI5 bootstrap script 的属性中使用与 JSON 字符串相同的对象结构:
<script id="sap-ui-bootstrap"
type="text/javascript"
src="resources/sap-ui-core.js"
data-sap-ui-theme-roots='{"my_theme" : "http://themes.org/ui5"}'>
</script>
(2) 通过 URL parameter 指定:
http://myserver.com/sap/myapp/?sap-ui-theme=my-theme@/sap/public/bc/themes/~client-111
(3) 通过全局配置对象指定。
将下列代码插入到 bootstrap 脚本之前：
<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>
上面的代码达到的效果：
-
从指定位置为所有库加载第一个主题。
-
从指定位置为 sap.ui.core 库加载第二个主题。对于所有其他库，主题从默认位置加载。
通过 sap-ui-theme/sap-theme URL 参数配置带有 themeRoot URL 的主题时，存在一些出于安全方面考虑的限制。
默认情况下，与当前页面不同来源的绝对 URL 被禁止访问。路径段将相对于当前页面 origin 值进行解析。
根据 RFC 6454，为了允许通过 URL 参数使用某些 origin 来源，可以将 <meta> 标记添加到页面的 <head> 中：
<meta name="sap-allowedThemeOrigins" content="https://example.com">
有了上面的语句之后，我们就可以在 SAP UI5 url parameter 里，加载部署在另一个 url 上的 theme：
https://myserver.com/sap/myapp/?sap-theme=my_theme@https://example.com/custom-themes/
<meta> 标记中提供的来源必须包含与 URL 参数中提供的来源相同的协议、主机和端口。 多个允许的来源可以用逗号分隔。
通用通配符 * 也可用于允许所有来源。 然而，这应该只与其他安全机制结合使用，例如 CSP style-src 指令。不支持允许子域的通配符。