「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。
⏳ 前言
作为一只小白前端看来，随着越来越多打工人在深夜办公，不管是想让眼睛免受疲劳还是更喜欢这种UI，夜间模式已经逐渐成为前端开发中不可或缺的一部分(建议掘金加入夜间模式🙊)，这篇文章就来记录一下给网页加入夜间模式。
模板
第一步先把网页的大致布局先完成一下
<!DOCTYPE html>
<html lang="en">
<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>深色模式</title>
<style>
body {
margin: 0;
background-color: #cccccc;
}
.reader-box {
width: 760px;
padding: 0 100px;
position: relative;
margin: 0 auto;
background-color: #f7f7f7;
}
.reader-box .title {
padding-top: 80px;
padding-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
border-bottom: 1px solid #ccc;
position: relative;
}
.content {
padding: 30px 0;
line-height: 50px;
}
.content img {
display: block;
margin: 0 auto;
}
.modeBtn {
position: absolute;
right: 0;
}
</style>
</head>
<body>
<div class="reader-box">
<header class="title">
格力市值一年蒸发近2000亿
<button class="modeBtn">🌞</button>
</header>
<main class="content">
<img
src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
alt="">
<p>在董明珠的“左膀右臂”黄辉和望靖东相继离职后，格力电器内部谁能接班董明珠变得扑朔迷离。而董明珠近日公开表示，要将其刚毕业的秘书培养成“第二个董明珠”，再度引发外界对其接班人的热议。
与此同时，格力电器业绩和股价均表现低迷。财报显示，2021年三季度，格力电器营收和净利润均呈两位数下滑态势，而老对手美的集团的营收净利润均实现小幅增长。
截至发稿，格力电器股价已较去年高点下跌47%，市值蒸发近1855亿元；美的股价也呈震荡下跌走势，截至发稿较年初高点下跌32%，市值蒸发2390亿元。
家电行业分析师刘步尘向观察者网表示，目前整个家电行业已进入存量竞争时代，增长空间有限。随着国家持续对房地产行业进行调控，资本市场已开始重新审视家电行业的估值。</p>
</main>
</div>
</body>
</html>
现在的页面看起来是这样的
当前的任务就是在点击右上角的太阳图标时，网页切换为夜间模式，同时背景变为黑色，字体切换为白色，同时图标从太阳变为月亮，表示当前为夜间模式
这个任务用js很快就能完成，首先我们将夜间模式的样式部分交由CSS完成
.box.night {
background-color: #000; // 背景黑色
color: #fff; // 字体白色
}
然后监听button的点击事件，并判断当前是否为夜间模式
<script>
const btn = document.getElementsByClassName('modeBtn')[0]
btn.addEventListener('click', (e) => {
const box = document.getElementsByClassName('box')[0]
if(box.className.includes('night')) {
box.classList.remove('night')
e.target.innerHTML = '🌜'
}else {
box.classList.add('night')
e.target.innerHTML = '🌞'
}
})
</script>
点击按钮切换夜间模式后网页呈现的效果
这样一来我们用JS实现了网页切换夜间模式的功能，但是能不能不用JS，完全用CSS来实现呢？
🔧 CSS实现深色模式
我们知道，在HTML中表单元素中的选择框checkbox能够完成状态的转换，那么我们可以通过选择框的是否选中checked状态，来切换网页的白天/夜间模式
首先先来调整一下网页的HTML结构：
<body>
<input type="checkbox" name="" class="modeCheckBox">
<div class="box">
<header class="title">
格力市值一年蒸发近2000亿
</header>
<main class="content">
<img
src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
alt="">
<p>在董明珠的“左膀右臂”黄辉和望靖东相继离职后，格力电器内部谁能接班董明珠变得扑朔迷离。而董明珠近日公开表示，要将其刚毕业的秘书培养成“第二个董明珠”，再度引发外界对其接班人的热议。
与此同时，格力电器业绩和股价均表现低迷。财报显示，2021年三季度，格力电器营收和净利润均呈两位数下滑态势，而老对手美的集团的营收净利润均实现小幅增长。
截至发稿，格力电器股价已较去年高点下跌47%，市值蒸发近1855亿元；美的股价也呈震荡下跌走势，截至发稿较年初高点下跌32%，市值蒸发2390亿元。
家电行业分析师刘步尘向观察者网表示，目前整个家电行业已进入存量竞争时代，增长空间有限。随着国家持续对房地产行业进行调控，资本市场已开始重新审视家电行业的估值。</p>
</main>
</div>
</body>
</html>
在上面这个结构中，我们将checkbox放到与box容器同一级别上，然后将checkbox选中状态时匹配兄弟节点box，从而来改变样式：
.modeCheckBox:checked + .box {
background-color: #000;
color: #fff;
}
这个时候将选择框选中时，网页切换到夜间模式
这样一来夜间模式完成，但是我们不能让用户点击checkbox来切换夜间模式，第一不美观第二不符合业务需求，因此我们可以用label元素来代替checkbox的触发行为。label的for属性可以指定id能够让label元素与对应的表单元素绑定，这样点击label时相当于改变checkbox的状态：
<body>
<input type="checkbox" name="" id="modeCheckBox">
<div class="box">
<header class="title">
格力市值一年蒸发近2000亿
<label for="modeCheckBox" class="modeBtn"></label>
</header>
<main class="content">
<img
src="https://pics2.baidu.com/feed/b3fb43166d224f4a9767ed456413fa5b9a22d1dc.jpeg?token=d45e882f3f1ca4a905153eb9d25149ac"
alt="">
<p>在董明珠的“左膀右臂”黄辉和望靖东相继离职后，格力电器内部谁能接班董明珠变得扑朔迷离。而董明珠近日公开表示，要将其刚毕业的秘书培养成“第二个董明珠”，再度引发外界对其接班人的热议。
与此同时，格力电器业绩和股价均表现低迷。财报显示，2021年三季度，格力电器营收和净利润均呈两位数下滑态势，而老对手美的集团的营收净利润均实现小幅增长。
截至发稿，格力电器股价已较去年高点下跌47%，市值蒸发近1855亿元；美的股价也呈震荡下跌走势，截至发稿较年初高点下跌32%，市值蒸发2390亿元。
家电行业分析师刘步尘向观察者网表示，目前整个家电行业已进入存量竞争时代，增长空间有限。随着国家持续对房地产行业进行调控，资本市场已开始重新审视家电行业的估值。</p>
</main>
</div>
</body>
.modeBtn {
position: absolute;
right: 0;
}
.modeBtn::after {
content: '🌞';
}
.box.night {
background-color: #000;
color: #fff;
}
.modeCheckBox {
display: none;
}
.modeCheckBox:checked + .box {
background-color: #000;
color: #fff;
transition: all 1s;
}
.modeCheckBox:checked + .box .modeBtn::after {
content: '🌜';
}
在上面的代码中，我将label元素与checkbox通过for属性绑定起来，并将label中的内容通过after伪元素来表示，这样就可以让checkbox隐藏起来，通过点击label元素来达到checkbox状态的改变从而达到改变label内容的效果。另外将切换夜间模式加入了渐入的CSS动画，可以提升用户体验
结言
这样一来通过使用JS和CSS实现网页切换夜间模式就完成了，本文是经过学习月影大大前端工程师进阶10日谈后改编总结而成的学习笔记，如有错误，欢迎指正👋
