方案一
使用css的var屬性，當(dāng)然此時不考慮低版本瀏覽器。
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，控制根節(jié)點html加them="dark"屬性
省去js的實現(xiàn)代碼，此時頁面應(yīng)有
<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，擴(kuò)展一，用js控制css 的變量可動態(tài)的改變顏色，實現(xiàn)不需要在配置一份主題顏色引入。
let btn = document.getElementById('btn')
let html = document.documentElement
btn.onclick=(e)=>{
html.style.setProperty('--main_color', 'red')
}
6，擴(kuò)展二，讓第三方組件使用我們的自定義顏色，場景：小程序當(dāng)前頁面有個日期組件，想動態(tài)改變?nèi)掌诮M件顏色。
// 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，使用時引入對應(yīng)的主題。
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('.')) { // 轉(zhuǎn)成相對地址
p = './' + p;
}
rs[name] = p;
}
})
return rs
});
const options = [{
mode: mode,
entry: {
app: './src/index.js',
...getCssEntry() // 引入多主題
},
......
}]
module.exports = options;
啟動后可以看到生成的主題
image.png
3，默認(rèn)主題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標(biāo)簽的引入href = "app.css" 和href="dark.css"的切換就可以了，省去js代碼...。
