dm-theme
v1.0.19
Published
迪迈换肤主题
Downloads
5
Readme
dimine 主题样式
- 现在提供了两种主题方案，tech-theme（大屏展示科技风 蓝色）、light-theme（日常工作 白色）两种主题样式、已适配element-plus组件
如何使用
切换主题时给最外层的dom加上对应的主题类名即可。
1.安装dm-theme
npm install dm-theme2.在main.js中引用
// 引用全部主题
import 'dm-theme/index.scss'
// 也可以分主题引用
import 'dm-theme/tech-theme/style/index.scss'
import 'dm-theme/light-theme/style/index.scss'
3.切换主题时动态给最外层dom加上对应的主题类名即可。dm-theme中提供了切换主题和切换主题色的方法。
<html class="light-theme">
// 切换主题和切换主题色的方法
import {setTheme, setDynamicColor} from 'dm-theme/utils'
// 切换主题 (直接传主题类名)
setTheme('light-theme')
// 切换主题色 支持css常用的颜色定义方法
// 1. 关键字颜色值: 如red、blue、green等等
// 2. 十六进制颜色值： 其格式为#RRGGBB
// 3. RGB颜色值: 其格式为rgb(红色值, 绿色值, 蓝色值)
setDynamicColor('red')
注意事项
主题有比较大的图片资源时，需要在引用主题项目中添加到/assets/theme/文件。有问题联系 [email protected]