扩展皮肤
MineAdmin 设计出的换肤功能,灵感思想来源于 D2Admin
。下面讲解一下如何制作新的皮肤
准备工作
- 在
public/skins-thumb
下建立 皮肤名称 的目录,该目录存放皮肤缩略图 - 在
src/style/skins
下建立 皮肤名称 的目录,并创建 index.less 文件。该目录主要存放样式及要使用的背景图片 - 打开
src/style/skin.less
引入皮肤的 index.less 文件 - 配置皮肤信息,打开
src/config/skins.js
增加相应的配置信息
样式范围前缀
皮肤前缀:[mine-skin="皮肤名称"]
/** 设置在 demo 这个皮肤下的菜单图标颜色 **/
[mine-skin="demo"] {
.arco-trigger-menu .arco-trigger-menu-has-icon .arco-trigger-menu-icon {
fill: rgb(var(--primary-6));
}
}
Arco 暗黑样式前缀:[arco-theme="dark"]
- 混合使用
/** 设置在 demo 这个皮肤的黑暗模式下的菜单图标颜色 **/
[mine-skin="demo"][arco-theme="dark"] {
.arco-trigger-menu .arco-trigger-menu-has-icon .arco-trigger-menu-icon {
fill: #fff;
}
}