方案一：设置网页属性
第一步：设置html标签如下（或者通过js修改，忽略这一步）
//dark 可以替换为自己想要的变量()
<html theme='dark'>
</html
第二步：在css/less/sass文件中编写如下
:root{
--light-body-bg-color:'#eeeeee';
--body-bg-color:var(--light-body-bg-color);
/* 这里面为默认主题配色*/
}
:root[theme='dark']{
--dark-body-bg-color:'#2f2f2f';
--body-bg-color:var(--dark-body-bg-color);
/* 这里面为dark主题的配色*/
}
//如果有多种主题,按照上面写更多就可以
:root[theme='atom-one-light']{}
:root[theme='atom-one-dark']{}
body{
background-color:var(--body-bg-color)
}
第三步：通过js切换主题
//我只有默认和暗黑，所以按照下面的写法
if (document.documentElement.hasAttribute('theme')) {
document.documentElement.removeAttribute('theme');
} else {
document.documentElement.setAttribute('theme', 'dark');
}
//也可以这样写
switch(theme){
case 'dark':
document.documentElement.setAttribute('theme', 'dark');
break;
//...
//...
default:
document.documentElement.removeAttribute('theme');
break;
}
最后，如果想要重新打开时主题是最后一次修改，把theme主题放在localStorage，每次打开网页时，从localStorage获取
方案二：编译多个css文件，动态引入css样式文件
这个方法我不常用，请左转百度。
个人认为第一种方式更合理，减小前端代码（虽然css文件占用不大）
网友评论