console
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const them_bgcolor = window.getComputedStyle(document.body).getPropertyValue('--them_bgcolor')
if (them_bgcolor === 'white') {
document.body.style.setProperty('--them_bgcolor', 'black');
document.body.style.setProperty('--them_color', 'white');
e.target.innerHTML = '天黑了';
} else {
document.body.style.setProperty('--them_bgcolor', 'white');
document.body.style.setProperty('--them_color', 'black');
e.target.innerHTML = '天亮了';
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>深夜食堂：版本一</title>
</head>
<body>
<div class="content">
<header>
<h1>深夜食堂</h1>
<button id="modeBtn" >天亮了</button>
</header>
<main>
<div class="pic">
<img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
</div>
<div class="description">
<p>
这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6] 。
</p>
</div>
</main>
</div>
</body>
</html>
header{
display:flex;
direction: row;
justify-content: space-between;
align-items: center;
}
.content{
width: 300px;
height: 600px;
margin: 0 auto;
}
img{
width: 100%;
}
body{
--them_color:black;
--them_bgcolor:white;
background-color: var(--them_bgcolor);
color: var(--them_color);
}