本文详细介绍了如何在swift应用的wkwebview中，使加载的动态html字符串内容（包括文本和背景色）自动适应ios系统的亮/暗模式。核心解决方案是利用css的`@media (prefers-color-scheme)`媒体查询，在html内容内部定义并应用主题相关的颜色变量，从而实现无需额外swift代码的无缝主题切换。
在iOS应用开发中，当使用WKWebView加载动态HTML内容时，确保其视觉风格能够与系统当前的亮/暗模式保持一致是一个常见的需求。特别是对于文本和背景色，开发者希望在亮模式下显示深色文本和浅色背景，而在暗模式下显示浅色文本和深色背景。虽然WKWebView本身的背景色可以通过Swift代码调整，但HTML内容内部的文本颜色等样式，则需要通过更精细的方式来控制。
解决方案核心：利用CSS媒体查询实现主题自适应
最有效且推荐的方法是，直接在WKWebView加载的HTML内容中嵌入CSS样式，利用CSS的@media (prefers-color-scheme)媒体查询来检测系统当前的主题偏好。这种方法将主题适应的逻辑直接集成到Web内容中，使得WKWebView能够自动响应系统主题变化，无需在Swift代码中进行复杂的颜色管理或主题切换逻辑。
CSS实现细节
以下是一个完整的CSS示例，展示了如何定义并应用亮/暗模式下的文本和背景颜色：
@media (prefers-color-scheme: light) { /* 亮模式 */
:root {
--scheme-black-color: #000000; /* 亮模式下的深色（用于文本） */
--scheme-white-color: #ffffff; /* 亮模式下的浅色（用于背景） */
}
}
@media (prefers-color-scheme: dark) { /* 暗模式 */
:root {
--scheme-black-color: #ffffff; /* 暗模式下的浅色（用于文本） */
--scheme-white-color: #000000; /* 暗模式下的深色（用于背景） */
}
}
body {
color: var(--scheme-black-color); /* 应用主题文本颜色 */
background-color: var(--scheme-white-color); /* 应用主题背景颜色 */
}代码解析：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
@media (prefers-color-scheme: light) 和 @media (prefers-color-scheme: dark): 这两个媒体查询是CSS3的新特性，它们允许开发者根据用户的系统主题偏好（亮或暗）应用不同的样式。当系统设置为亮模式时，light块内的样式生效；当系统设置为暗模式时，dark块内的样式生效。
-
:root 伪类与CSS变量（自定义属性）: :root 伪类代表文档的根元素（在HTML中通常是<html>）。在这里，我们定义了两个CSS变量：--scheme-black-color 和 --scheme-white-color。
- 在亮模式下，--scheme-black-color 被定义为黑色（#000000），--scheme-white-color 被定义为白色（#ffffff）。
- 在暗模式下，这两个变量的值互换，--scheme-black-color 变为白色（#ffffff），--scheme-white-color 变为黑色（#000000）。 通过使用变量，我们可以集中管理主题颜色，提高代码的可维护性。
body { color: var(--scheme-black-color); background-color: var(--scheme-white-color); }: 这一部分将前面定义的CSS变量应用到<body>元素上。color属性用于设置文本颜色，background-color属性用于设置背景颜色。当系统主题切换时，--scheme-black-color和--scheme-white-color的值会自动更新，从而使<body>的文本和背景色随之改变。
Swift代码集成
在Swift应用中，你只需要确保加载到WKWebView的HTML字符串contentData包含了上述CSS样式即可。Swift侧的代码无需为主题切换做任何额外处理。
func displayData() {
if let contentData = self.response?.data?.content {
do {
// 确保 contentData 包含了上述 CSS 样式（通常放在 <head><style>...</style></head> 中）
self.webView.loadHTMLString(contentData, baseURL: nil)
} catch {
print("加载HTML字符串时发生错误: \(error)")
}
}
}在这个displayData函数中，self.response?.data?.content应该是一个完整的HTML字符串，其中包含了我们定义的CSS样式。例如：
<html>
<head>
<style>
@media (prefers-color-scheme: light) {
:root {
--scheme-black-color: #000000;
--scheme-white-color: #ffffff;
}
}
@media (prefers-color-scheme: dark) {
:root {
--scheme-black-color: #ffffff;
--scheme-white-color: #000000;
}
}
body {
color: var(--scheme-black-color);
background-color: var(--scheme-white-color);
}
</style>
</head>
<body>
<p>这是您的动态HTML内容，它将自动适应亮/暗模式。</p>
<p>无论当前是亮模式还是暗模式，文本和背景色都会正确显示。</p>
</body>
</html>注意事项与总结
- CSS嵌入方式: 确保CSS样式被正确地嵌入到HTML字符串中。最常见的方式是将其放置在HTML文档的<head>标签内的<style>标签中。
- 动态内容: 如果你的HTML内容是动态生成的，请确保在生成HTML字符串时，将上述CSS代码包含进去。这通常意味着在服务器端或客户端拼接HTML时，将这段CSS作为模板的一部分。
- Swift代码的简洁性: 采用此方法后，Swift代码无需关心系统主题的变化，所有的主题适应逻辑都由Web内容自身处理，大大简化了原生应用的复杂性。
- 适用性: 这种方法对于通过loadHTMLString加载的HTML内容非常有效。如果WKWebView加载的是远程URL，则确保该URL返回的HTML文件中包含了这些CSS规则。
- 更复杂的样式: 除了body，你还可以将这些CSS变量应用到HTML内容中的任何其他元素（如div, p, h1等），以实现更精细的主题控制。
通过上述方法，你可以轻松地使WKWebView中显示的HTML内容自动响应iOS系统的亮/暗模式，提供一致且用户友好的视觉体验。
