这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
前言
标题起不出来了不知道该用啥名字好了 ，突然灵感又来了。
感觉这节 JS 与上一节 CSS 并不适合真正 0 基础的同学来听，对 0 基础的同学并不友好
深夜食堂的第四版
在今天这节课的第一小节里有个例子是深夜食堂，第三版使用 CSS 伪类来进行切换，但是在 UI 框架中大部分都会使用第二种修改 CSS 类名的方法来实现又或者和 ArcoDesign 一样使用属性名来作为标记，然后配合上一章 再探CSS ｜ 青训营笔记 中的属性选择器来改变样式。
不使用第三版利用伪类去切换的原因
在第三版中，首先有个多选框隐藏起来，然后使用for属性让label标签能够同样触发:checked伪类，这样就能实现切换日间 / 夜间。
但是这里仅有一张图片与一段文字这种简单的结构，而日常开发中的结构则比这种复杂的多，在这里可以在:checked伪类中更改背景颜色与字体颜色，但是到了复杂结构中你并不仅仅需要更改这几项，还会去更改按钮颜色、卡片背景颜色、表格头颜色、图表颜色等，需要更改的 CSS 会非常多，所以第三版仅适用于这种简单结构。
第四版方式
第四版的实现方式其实与第二版修改类名类似，只是在第二版上增加了 CSS 变量的使用，实现如下：
第四版在body的 css 样式中，添加了--background-color和--text-color两个变量，并在body中将背景颜色与字体颜色设置为这两个变量，在夜间样式中覆盖掉了这两个变量，从而在切换到夜间时改变背景颜色与字体颜色。
