SAPUI主题设计器——UI Theme Designer（二）

修改前（下图）：

修改后（下图）：

上次介绍了SAP 中 UI Theme Designer的快速设置部分，相信亲自试过以后，已经能够把界面改的面目全非了，如果配色掌握不太好的同学，界面上将惨不忍睹，所以掌握一定的配色知识还是很有必要的。但是我们发现，快速设置里面，基本上是对界面颜色的基本定义，绝大多数修改的都是颜色值，那我们有的时候还会有边框粗细、文字大小、间距大小等修改的需求，这时我们就需要用到专家模式了。

专家模式可以说是UI Theme Designer 里面能够修改内容的集合了，如果通过这里能够把界面改成客户需要的样子，那真的是幸福完美（就不需要去动css样式表了）。

专家模式是将所有可修改项罗列出来，这么多的选项我们如何定位呢？幸好他提供了几种选择方式：分类、搜索、筛选。

• 分类是把主要参数分为颜色、尺寸、板式、图像和全部，可以根据要修改内容选择对应分类；
• 搜索功能可以直接输入主题参数中的关键字，方便我们查找相关内容；
• 筛选包括筛选修改项、筛选错误项、从页面中选择要修改元素。

如何从海量参数中找到自己想要的，是在专家模式中更需要掌握的技巧，熟悉各部分的命名规则是重中之重，灵活运用系统提供的搜索筛选功能可以做到事半功倍。如何茶盅相关参数，会在下一章中介绍。

  

UI Theme Designer里还支持调色板自定义颜色，和自定义CSS样式。

自定义颜色只需要设置一个颜色名和对应的颜色值即可，这样在修改颜色时，可以直接从调色板中选取设置好的颜色。

自定义CSS样式，有一段注释：添加自定义 CSS 难于在各次升级之间进行维护，并且可能会导致额外的维护工作。 SAP 既无法直接支持自定义 CSS 的维护，也无法保证其在升级之后产生预期结果。 如果必须添加自定义 CSS，应在升级前用文档记录预期结果及其他受影响的 CSS 规则，以使任何必要的升级后维护和测试变得更加容易。 自定义 CSS 只能用于其添加到的 UI 技术。自定义的css应该是加载到/UR/ls/xxx/custom.less文件中进行编译的。