web端适配深色模式的一些的认识
预计阅读时间：2分钟
介绍
深色模式是WWDC(Worldwide Developers Conference 2018提到，2019正式引进的的一个系统级的feature)，让整个生态系统对于用户更加友好优雅。
实践
要适配深色模式，代码层面主要做2件事情
- 去判断当前用户偏好设置的深色模式
- 针对深色模式，调整css
针对第一件事：判断偏好
media query 支持 prefers-color-scheme这个查询，所以可以在任何支持查询的地方使用
- 在css中
@media (prefers-color-scheme: dark) {
:root {
XXX: YYY
}
}
- js中
var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
darkQuery.addListener(function(e) {
window.__setPreferredTheme(e.matches ? 'dark' : 'light')
});
- html element中
<picture>
<source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
<img src="mojave-day.jpg">
</picture>
针对第二件事：方改变css
- 可以编译两套css，然后代码中根据matchMedia判断状态，然后加载/移除dark的css，一些库中用的比较多，比如rsuite
- 直接使用css变量
:root {
color-scheme: light dark;
--special-text-color: hsla(60, 100%, 50%, 0.5);
--border-color: black;
}
@media (prefers-color-scheme: dark) {
:root {
--special-text-color: hsla(60, 50%, 70%, 0.75);
--border-color: white;
}
}
.special {
color: var(--special-text-color);
border: 1px solid var(--border-color);
}
- 结合css预处理器和css变量，参考 css-tricks.com/difference-…
- 等等等等
