第一、Web Content适配
https://developer.apple.com/videos/play/wwdc2019/511/
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
问题展示
先看两张图:
如上图所示,如果h5未适配dark模式,则在dark模式下原来的页面内容展示就就存在问题。
适配方法
这里主要介绍基于CSS样式的修改来适配web内容
首先,一定要声明当前支持的color-scheme有两种样式,这一句很重要,用东北话说就是“必须的”
:root {
color-scheme: light dark;
}
适配的策略就是为两种color-scheme设置不同的颜色样式。
1、文本适配
如图一,它的CSS描述为
body {
color: black;
}
h1 {
color: #333;
}
.header {
background-color: #593a78;
color: white;
}
这里相关的颜色样式都是写死的,所以dark模式下才会出现图二的情况。现在我们来看如何适配下面这段代码:
h1 {
color: #333;
}
.header {
background-color: #593a78;
color: white;
}
然后可用如下方式改造:
:root {
color-scheme: light dark;
--post-title-color: #333;
--header-bg-color: #593a78;
--header-txt-color: white;
}
h1 {
color: var(--post-title-color);
}
.header {
background-color: var(--header-bg-color);
color: var(--header-txt-color);
}
这里所做的工作实际上是抽象了颜色的值的setter和getter,即不同模式下的值统一定义,然后使用时通过var()去自动获取。
而结合@media与prefers-color-scheme,颜色值的定义可以更加清晰:
@media (prefers-color-scheme: dark) {
:root {
--post-title-color: white;
--header-bg-color: #513d66;
--header-txt-color: #eee;
}
}
同理可以定义light模式下的色值。
2、图片适配
假设原文件有一幅图片资源,其CSS描述如下:
那么,可以通过下面的方式来达到适配两种模式的目的:
3、动态内容适配
动态内容适配需要注意:WebKit提供了获取指定模式下需要适配的多媒体项的能力,以及不同模式间切换的通知,一般情况下,通过下面的方式可以完成适配:
// Adapting dynamic content to dark mode with JavaScript
let darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
function updateForDarkModeChange() {
if (darkModeMediaQuery.matches) {
...
} else {
...
}
}
darkModeMediaQuery.addListener(updateForDarkModeChange);
updateForDarkModeChange(); // Handle if Dark Mode is already active.
所以,这里很显然要处理light2dark和dark2light等情形。
如果需要更深度的定制,需h5与客户端评估是否需要注入js变量来判断当前模式。如果涉及服务端的直接适配,则可考虑在UA中添加识别信息。
4、小结:
- 使用 color-scheme 来声明支持的模式;
- 利用prefers-color-scheme来设置不同模式下的配置;
- 利用
- 利用var() 方法来适配不同模式下的变量取值;
- 动态内容适配视具体情况而定。