我们可以使用下图高亮的这行代码来设置应用的 theme:
sap.ui.getCore().applyTheme("sap_fiori_3");
这个方法使用给定名称应用主题,其具体实现方式是通过加载相应的样式表,这不会中断应用程序的正常执行。
默认情况下,主题文件应位于相对于相应控件库的路径:
[libraryLocation]/themes/[themeName]
可以使用 setThemePath() 方法或 applyTheme() 的第二个参数 sThemeBaseUrl
来配置不同的位置。第二个参数的用法是 setThemePath 的简写,并在内部调用 setThemePath,因此主题位置是已知的。
sThemeBaseUrl 是一个 URL,用于指定所有主题文件的默认位置。此 URL 是控制库文件夹所在的基本文件夹。例如。如果 CSS 文件不是相对于 UI5 的根位置,而是位于类似 http://my.server/myapp/resources/sap/ui/core/themes/my_theme/library.css
的位置,那么 URL需要给出的是:
http://my.server/myapp/resources
然后从该文件夹下面加载所有主题资源 - 除非已注册某个库的不同位置。
如果主题资源不是全部位于此基本位置或它们各自的库中,则必须使用 setThemePath 来配置各个位置。
设置不同 theme 的重要性
如果对比度不足,有视力障碍的人和在不太理想的情况下使用应用程序的人(显示器故障、阳光照射屏幕、窗户反射)可能无法轻松阅读文本。
实施新控件时,请考虑添加对不同主题的支持并检查元素之间的颜色对比。 UI 上显示的不同颜色需要相互之间具有良好的对比度,以便于区分。
SAPUI5 在创建和使用不同的视觉设计(称为主题)时为开发人员提供支持,这些设计可以交替使用和动态切换。 这样,同一个应用程序的外观可能会大不相同,具体取决于用户的设计偏好或可访问性要求。 现有主题可以作为新主题的基础,并且在出现新设计趋势的情况下,可以为所有现有应用程序创建匹配的主题,而无需修改应用程序。 主题处理与应用程序开发分离,并在单独的层中完成。 SAPUI5 库加载所需的 CSS 文件并提供切换主题的方法。