- 浅色主题
- 暗色主题
- 清除手动设置的影响
原理:利用了媒体查询,监听系统的主题,可以自动给body添加了背景色,并且页面是自动响应的。
也就是你会看到这样的场景,当日落的那一刻,如果你的主题是自动变化的,你会看到本页页面变成黑色主题。或者你手动改变系统主题也会看到当前页面的主题发生改变。
手动点击按钮修改主题是给body增加了class,此时class选择器的权重高于标签body选择器的权重,样式会覆盖。
不给文字赋字体颜色,light主题下文字颜色默认是黑色,dark主题下文字颜色默认是白色。