1、定义不同主题颜色
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
2、通过切换html自定义属性来控制主题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="theme">
</div>
<button>改变主题</button>
</body>
<script>
document.getElementsByTagName('button')[0].addEventListener('click',changeTheme,false);
function changeTheme(){
console.log('changeTheme')
if(document.documentElement.getAttribute('theme') === 'dark'){
document.documentElement.setAttribute('theme','light');
}else{
document.documentElement.setAttribute('theme','dark');
}
}
</script>
</html>
<style>
:root{
--theme-color: blue;
--font-size: 18px;;
}
html[theme="dark"]{
--theme-color: #000;
--font-size: 13px;
}
.theme{
width: 700px;
height: 700px;
background: var(--theme-color);
}
</style>