Dm-theme NPM | npm.io

dimine 主题样式

现在提供了两种主题方案，tech-theme（大屏展示科技风蓝色）、light-theme（日常工作白色）两种主题样式、已适配element-plus组件

如何使用

切换主题时给最外层的dom加上对应的主题类名即可。

1.安装dm-theme

npm install dm-theme

2.在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')

注意事项