第一种：提前引入所有样式，用类名切换
// dark.css
/* dark样式主题 */
body.dark .box {
color: #eee;
background: #333;
}
// day.css
/* day样式主题 */
body.day .box {
color: #f90;
background: #fff;
}
// html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="public.css">
<link rel="stylesheet" href="day.css">
<link rel="stylesheet" href="dark.css">
<title>theme</title>
</head>
<body>
<div id="app">
<div>
<button class="btn-day">白天</button>
<button class="btn-dark">夜晚</button>
</div>
<div class="box">
<div>提前引入所有主题样式，做类名切换</div>
<div>
做法:<br/>
需要切换主题的时候将指定的根元素类名更换
</div>
<div>
优点：不用重新加载样式文件，在样式切换时不会有卡顿
</div>
<div>
缺点：首屏加载时会牺牲一些时间加载样式资源<br/>
如果主题样式表内定义不当，也会有优先级问题<br/>
各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦
</div>
</div>
</div>
</body>
<script>
document.body.className = 'day';
document.getElementsByClassName('btn-day')[0].onclick = ()=>{
document.body.className = 'day';
}
document.getElementsByClassName('btn-dark')[0].onclick = ()=>{
document.body.className = 'dark';
}
</script>
</html>
第二种：link标签动态引入
// default.css
.text {
color: #999;
}
// blue.css
.text {
color: blue;
}
// green.css
.text {
color: green;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>theme</title>
</head>
<body>
<div id="app">
<div>
<button class="default">默认</button>
<button class="blue">蓝色</button>
<button class="green">绿色</button>
</div>
<div class="text">
<div>link标签动态引入</div>
<div>
做法:<br/>
提前准备好几套CSS主题样式文件<br/>
在需要的时候，创建link标签动态加载到head标签中，或者是动态改变link标签的href属性。
</div>
<div>
优点：实现了按需加载，提高了首屏加载时的性能
</div>
<div>
缺点：动态加载样式文件，如果文件过大网络情况不佳的情况下可能会有加载延迟，导致样式切换不流畅<br/>
如果主题样式表内定义不当，会有优先级问题<br/>
各个主题样式是写死的，后续针对某一主题样式表修改或者新增主题也很麻烦<br/>
</div>
</div>
</div>
</body>
<script>
function createLink(cssURL){
var head = document.getElementsByTagName('head')[0],
linkTag = null;
if(!cssURL){
return false;
}
// 判断link是否存在，存在时，改变href,不存在时创建
if (document.getElementsByTagName('link').length > 0) {
document.getElementsByTagName('link')[0].href = cssURL;
} else {
linkTag = document.createElement('link');
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('type','text/css');
linkTag.href = cssURL;
head.appendChild(linkTag);
}
}
createLink(`default.css`);
document.getElementsByClassName('default')[0].onclick = ()=>{
createLink(`default.css`);
}
document.getElementsByClassName('blue')[0].onclick = ()=>{
createLink(`blue.css`);
}
document.getElementsByClassName('green')[0].onclick = ()=>{
createLink(`green.css`);
}
</script>
</html>
第三种：CSS变量+类名切换
// dark.css
/* dark样式主题 */
.dark {
--theme-color: #fff;
--theme-background: #333;
}
// day.css
/* day样式主题 */
.day {
--theme-color: #999;
--theme-background: #fff;
}
// public.css
@import "dark.css";
@import "day.css";
.box {
height: 400px;
border: 1px solid #000;
padding: 10px;
color: var(--theme-color);
background: var(--theme-background);
}
// html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="public.css" />
<link rel="stylesheet" href="day.css" />
<link rel="stylesheet" href="dark.css" />
<title>theme</title>
</head>
<body>
<div id="app">
<div>
<button class="btn-day">白天</button>
<button class="btn-dark">夜晚</button>
</div>
<div class="box">
<div>CSS变量+类名切换</div>
<div>
做法:<br />
依然是提前将样式文件载入，切换时将指定的根元素类名更换。
</div>
<div>
优点：不用重新加载样式文件，在样式切换时不会有卡顿<br />
在需要切换主题的地方利用var()绑定变量即可，不存在优先级问题<br />
新增或修改主题方便灵活，仅需新增或修改CSS变量即可，在var()绑定样式变量的地方就会自动更换<br />
</div>
<div>
缺点：首屏加载时会牺牲一些时间加载样式资源<br />
IE兼容性（IE9以下不兼容）
</div>
</div>
</div>
</body>
<script>
document.body.className = "day";
document.getElementsByClassName("btn-day")[0].onclick = () => {
document.body.className = "day";
};
document.getElementsByClassName("btn-dark")[0].onclick = () => {
document.body.className = "dark";
};
</script>
</html>