ZUI外观风格力求简洁悦目,不过你可能仍然需要进行个性化设置,这时你可以充分利用ZUI提供的主题样式表来个大换装。

体验主题

点击以下主题来更改文档外观:

主题:default

重新编译ZUI

你可以通过重新编译ZUI来更改ZUI组件的外观。

ZUI外观配置文件

外观配置文件存放在src/less/basic/variables.less

通过修改less变量来更改外观配置。

导入额外的配置

创建一个新的LESS文件,并存放在src/less/basic/setting.less

此文件中的配置会覆盖src/less/basic/variables.less中官方设置。

编译Less

使用gulp dist命令来编译ZUI,编译后的CSS样式表存放在dist/css/目录下。

开始定制主题

主题配置文件

主题配置文件存放在src/less/basic/variables.theme.less

通过修改less变量来更改外观配置。

主题文件

主题文件存放在src/less/theme.less

修改主题文件来定制主题外观。

编译Less

使用gulp theme命令来编译主题,编译后的CSS样式表存放在dist/css/zui-theme.css。导入生成的样式表即可应用主题外观效果。