<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换主题</title>
<link rel="stylesheet" type="text/css" href="./test.css"/>
</head>
<body>
<div onclick="toggleTheme()">更改主题</div>
<div class="parent">
<ul>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
<li>测试内容</li>
</ul>
</div>
</body>
<script>
let darkMode = false
function toggleTheme(){
darkMode = !darkMode
document.querySelector('html').setAttribute('theme', darkMode ? 'dark' : 'light')
}
</script>
<style>
.parent{
width: 100%;
height: 100%;
font-size: 24px;
}
ul{
width: 100%;
height: 100%;
}
ul li{
height: 100px;
}
</style>
</html>
