html 切换主题,html切换主题实现方案

方案一

使用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代码...。