主题功能 · EasyWeb开发文档

## 9.1.主题功能默认的样式以及内置的几套主题都在admin.css中，如果要自定义主题步骤如下： 1. 前往 [主题生成器](https://demo.easyweb.vip/theme.html) 在线定制主题； 2. 将生成的css放在admin.css里面，也可以像admin.css一样引入，可以直接通过`<style>`写在页面中，也可以建一个`theme-all.css`引入，将所有生成的主题都放在这个css文件里面； 3. 打开“page/tpl/tpl-theme.html”添加生成的主题： ```html <div class="more-theme-list">  <div class="more-theme-item" data-theme="theme-cyan"> <img src="assets/module/img/theme-cyan.png"/> </div> </div> ``` 主题的预览图在主题生成器中会生成，右键可保存为图片，`theme-all.css`最好在admin.css之后引入。 **设置默认主题也会闪一下才会切换怎么办：** 因为主题切换是通过js切换的，js都是在css、html加在完毕之后执行的，有一点点延迟也很正常，而且换主题是换class，大部分组件都写有transition的0.3s的css过渡效果，解决办法只能是直接在index.html的`body`上面加上主题对应的class： ```html <body class="theme-red" data-theme="theme-red"></body> ``` 或者直接修改下主题的css，把前面的`.theme-xxx`改成body，这种方法只适合固定一套主题不需要切换的情况。 <br/>