方案一
使用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的实现代码，此时页面应有
...
切换成dark主题
document.getElementById('btn').οnclick=(e)=>{
document.documentElement.setAttribute('theme', 'dark')
}
可以看出dark的主题颜色变量覆盖了default的主题颜色变量
颜色变量覆盖
5，扩展，用js控制css 的变量可动态的改变颜色，实现不需要在配置一份主题颜色引入。
let btn = document.getElementById('btn')
let html = document.documentElement
btn.οnclick=(e)=>{
html.style.setProperty('--main_color', 'red')
}
方案二
引入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代码...。
