网页主题换色
主题色
开始在 全局设置好主题色变量，
:root {
--theme_font: #fff;
--theme_bg: #f00;
}点击切换按钮后切换变量
document.styleSheets[0].cssRules[0].style.setProperty("--theme_font", "#000");定制布局
- Reslove. Extension
暗黑主题
不同人群有不同的需要：
- 飞蚊症患者可能更喜欢 dark mode（可能是 dark mode 下飞蚊不那么明显？）
- 散光患者可能在 light mode 下更容易聚焦
设置 dark mode
1. 在 <head> 中添加 <meta name="color-scheme" content="light dark">
<head>
<!-- 其他内容 -->
<meta name="color-scheme" content="light dark">
<!-- 其他内容 -->
</head>
<!-- 也可以在元素上设置 -->
<div style="color-scheme: light dark;">…</div>但是浏览器只会改变那些没有主动设置颜色的元素，如果你给一个元素设置了 color, background-color 等，浏览器是不知道如何切换颜色的。
2. CSS 中通过 light-dark() 设置不同的颜色
按照 color-scheme 文档中的介绍，有两种办法去适配颜色：
-
:root { color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.element {
color: black;
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.element {
color: white;
background-color: black;
}
}
- 使用 [light-dark()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) 这是 [Come to the light-dark() Side](https://css-tricks.com/come-to-the-light-dark-side/) 中推荐的方法。
```css
:root {
color-scheme: light dark;
}
.element {
/* fallback 的颜色，当用户浏览器不支持 color: light-dark(black, white); 时，回退到这个颜色 */
color: black;
/* light mode 下 color 用 black, dark mode 下 color 用 white */
color: light-dark(black, white);
background-color: white;
background-color: light-dark(white, black);
}
3. 页面上通过 <select> 去切换 <meta name="color-scheme"> 的值，用 localStorage记住读者选择的 color-scheme
一些坑
dark mode 下 iframe 的处理
<iframe> 是不受 style.css 的影响，为了能够适配 color-scheme，我会遍历页面上所有的 iframe，然后在他们的 contentDocument 设置 color-scheme 属性。
这里也会存在一个时机的问题，需要在 iframe 加载完成后再设置 color-scheme 才行，不然 color-scheme 无法生效，实现上是通过监听 iframe 的 load evnet进行设置的。