我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
本文将要介绍如何用纯css加上html实现一个主题切换按钮，能够切换页面背景的明暗，并且只需要通过input标签的check类型以及css代码，也就是不需要用到js的实现方式。
实现
实现过程
首先我们想要实现一个明暗主题切换的话，这个按钮就是需要我们去设计的，在什么情况下应该要展示什么样的颜色，我这里采用的是比较简约的样式，白色的背景就展示黑色的按钮白色的按键，这样子的对比比价鲜明一点。
按钮实现
首先我们需要来实现按钮，在未选择的状态下，我们用label元素来作为按钮的外框，利用伪元素来做按钮里面的那个按键。
label {
width: 80px;
height: 40px;
display: block;
background-color: #222;
border-radius: 40px;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4), inset 0px -1px 3px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: 0.3s;
}
label:after {
content: "";
width: 28px;
height: 28px;
position: absolute;
top: 6px;
left: 6px;
background: #eee;
border-radius: 32px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
这样就能够得到一个比较简单的按钮的原型。
然后就是需要处理按钮被点击之后的样式，我们可以使用input元素上的check伪元素来选中input被选中时候的css选择器，并且通过这个选择器的兄弟选择器分别去关联到其他的元素，从而修改他们身上的样式。
input:checked + label {
...
}
input:checked + label::after {
...
}
然后就是在选中之后，按键应该需要移位到按钮的右侧，并且按键以及按钮的颜色应该要发生转化。
最后在通过兄弟元素关联到背景元素，改变背景元素的背景色，就能够实现背景色切换了
样式优化
按钮被选中移动的这个过程是有一点僵硬的，我们可以利用 active 伪元素，来选中按键被点击之后的样式，并且进行改变，这个伪元素选中的是鼠标点击到松开这段时间的按键，我们可以稍微将按键加长一点，这样子来模拟出移动的感觉，看一下最后的成品。
总结
本文主要是通过过渡效果实现了一个简单的主题切换按钮，但也只是一个按钮，实现明暗主题切换的流程，还需要更多的方案去实现
