主题
模块主题配置是为了用户能够自定义你模块的颜色等,在duxapp模块中,提供了一些基础的出题配置,如:主色调、辅色调、成功、失败、警告、文本颜色、文本字号等配置,一般来说,这些配置基本能覆盖大大多数场景的使用
现有主题使用
在scss中
大多主题配置会被脚本转换为scss的全局变量,在scss直接调用这些全局变量即可
color: $duxappPrimaryColor; // 调用主色
background-color: $duxappSecondaryColor; // 调用辅色
font-size: $duxappTextSize3; // 调用字号
所有模块的用户配置的主题会被编译在 src/theme.scss
文件中,这个文件会作为全局scss注入,你可以在任何scss文件中调用这些变量,你也可以打开这个文件查找有哪些变量可用
在jsx中
import { duxappTheme } from '@/duxapp'
// 调用主色
duxappTheme.primaryColor
// 调用辅色
duxappTheme.secondaryColor
// 调用字号
duxappTheme.textSize3
信息
duxapp模块提供了基础主题配置,每个模块可能都有自己的配置,需要前往每个模块中查看和导入
用户配置主题
模块提供了默认的主题配置,但是通常不符合项目的使用,通过项目配置文件 configs/config/index.js
进行主题的配置
在这个配置中 option.modeName.theme
字段将会被作为模块的主题配置,这些配置将会和默认的配置进行覆盖合并,其配置内容和默认配置保持一致
定制模块主题
如果基础模块提供的主题配置不满足需求,则可以给自己的模块也定制主题
默认配置
在config
目录下新建 theme.js
默认导出对象作为主题配置
export default {
priceColor: 'red'
}
配置之后无需其他处理,就可以像上面一样在jsx中调用了
如果需要在scss中也能调用这个变量,需要编写 config/themeToScss.js
脚本文件进行转换
转换全局变量
编写一个脚本将用户传入的主题配置转换为全局scss变量,此处传入的theme,是用户配置的主题,不包含默认的主题配置,也就是说,这个内容他可能是空,因此,你需要写默认的 全局变量
export default theme => {
return `
$modeNamePriceColor: ${theme.priceColor || 'red'};
`
}
然就需要重新启动编译,就可以在scss调用$modeNamePriceColor
这个全局变量了
信息
- 如果修改了用户配置的主题,需要重启编译才会让全局scss变量生效