prefers-color-scheme 是 CSS 的媒体查询属性，如果值是 light，表示浅色模式，如果是 dark 表示深色模式，HTML 页面可以根据这个媒体查询，设置页面在浅色和深色时候的样式。具体的例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
@media (prefers-color-scheme: dark) {
.test{ background: #000000; color: white; }
}
@media (prefers-color-scheme: light) {
.test{ background: #00ff00; color:white; }
}
</style>
</head>
<body>
<div class="test">测试文本</div>
</body>
在 Android 的 WebView 中加载使用了 prefers-color-scheme 属性的页面，如果不做任何处理，系统改为深色模式，HTML 页面不会切换到深色模式的样式。需要 WebView 做一些设置。具体的设置如下：
首先需要引入 Android Jetpack 的 webkit 库，在 build.gradle 中依赖
implementation("androidx.webkit:webkit:1.4.0")
然后在给 WebView 做如下设置
```
val webView = findViewById<WebView>(R.id.webview)
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
} else {
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_OFF)
}
WebSettingsCompat.setForceDarkStrategy(
webView.settings,
WebSettingsCompat.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY
)
}
webView.loadUrl("file:///android_asset/test.html")
