方案一
使用css的var属性，当然此时不考虑低版本浏览器。
1，在default.css主题根元素定义颜色变量
:root {
--main_color: #03a9f4; // 主题色
--main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover
--main_lighter: #65caf5; // 三级主题色 常用border
--main_extra_light: #e6f7ff; // 四级主题色 常用background
}
2，使用时，参考css var属性。
.test{
color: var(--main_color);
}
3，在dark.css主题根元素定义替换变量
:root[theme=dark] {
--main_color: #2F4554; // 主题色
--main_light: #686a6b; // 二级主题色
--main_lighter: #9a9b9c; // 三级主题色
--main_extra_light: #d7d8d8; // 四级主题色
}
4，点击切换成dark主题时，引入dark.css，控制根节点html加them="dark"属性
省去js的实现代码，此时页面应有
<html lang="en" theme="dark">
<head>
<link rel="stylesheet" type="type/css" href="dark.css" />
...
<button id="btn">切换成dark主题<buttom>
<script>
document.getElementById('btn').onclick=(e)=>{
document.documentElement.setAttribute('theme', 'dark')
}
</script>
</html>
可以看出dark的主题颜色变量覆盖了default的主题颜色变量
颜色变量覆盖
5，扩展一，用js控制css 的变量可动态的改变颜色，实现不需要在配置一份主题颜色引入。
let btn = document.getElementById('btn')
let html = document.documentElement
btn.onclick=(e)=>{
html.style.setProperty('--main_color', 'red')
}
6，扩展二，让第三方组件使用我们的自定义颜色，场景：小程序当前页面有个日期组件，想动态改变日期组件颜色。
// index.jsx，传入颜色变量，此变量在css中使用
render() {
return <View className='main-content' style={{'--main-color': theme.color}}>
<AtCalendar className="calendar-content"></AtCalendar>
</View>
}
// index.less
.main-content{
.calendar-content{
background-color: var(--main-color);
}
}
方案二
引入scss，配置webpack生成多份的主题css，使用时引入对应的主题。
1，新建主题目录
image.png
2， 配置webpack.config.js打包成多份的css
const globby = require('globby');
const getCssEntry = (() => {
const paths = globby.sync('*.scss', {
cwd: path.join(__dirname, './style/themes')
});
const rs = {}
paths.forEach(h => {
if (!h.includes('_')) { // 过滤打包_的命名文件
let name = path.basename(h, '.scss')
let p = path.join('./style/themes', h);
if (!p.startsWith('.')) { // 转成相对地址
p = './' + p;
}
rs[name] = p;
}
})
return rs
});
const options = [{
mode: mode,
entry: {
app: './src/index.js',
...getCssEntry() // 引入多主题
},
......
}]
module.exports = options;
启动后可以看到生成的主题
image.png
3，默认主题app.css定义变量和引入样式
$main_color: #03a9f4; // 主题色
$main_light: #33baf7; // 二级主题色 常用背景为主题色下的hover
$main_lighter: #72cef7; // 三级主题色 常用border
$main_extra_light: #e6f7ff; // 四级主题色 常用background
@import './_common.scss';
4，深色主题dark.css定义变量和引入样式
$main_color: #2F4554; // 主题色
$main_light: #686a6b; // 二级主题色
$main_lighter: #9a9b9c; // 三级主题色
$main_extra_light: #d7d8d8; // 四级主题色
@import './_common.scss';
_common.scss下可以是
.test{
font-size: $main_color;
}
5，使用js控制link标签的引入href = "app.css" 和href="dark.css"的切换就可以了，省去js代码...。
