Swift中如何修改WebView背景色与文本色适配明暗模式

方法一：给动态HTML添加明暗模式适配的内联CSS #

直接在加载的HTML字符串头部插入适配系统明暗模式的CSS样式，利用prefers-color-scheme媒体查询自动切换文本颜色：

func displayData() {
    guard let contentData = self.response?.data?.content else { return }
    
    // 拼接带适配样式的完整HTML
    let styledHTML = """
    <!DOCTYPE html>
    <html>
    <head>
        <style>
            /* 默认浅色模式：黑色文本 */
            body, p, div, span {
                color: #000000;
                margin: 0;
                padding: 0;
            }
            /* 深色模式：白色文本 */
            @media (prefers-color-scheme: dark) {
                body, p, div, span {
                    color: #ffffff !important;
                }
            }
        </style>
    </head>
    <body>
        \(contentData)
    </body>
    </html>
    """
    
    self.webView.loadHTMLString(styledHTML, baseURL: nil)
}

说明：

• 用!important强制覆盖动态HTML中可能存在的硬编码文本颜色
• 可根据实际HTML结构扩展选择器（比如h1、a等标签），确保所有文本元素都适配

方法二：监听系统模式变化，动态注入CSS #

如果HTML已经加载完成，可通过监听系统明暗模式切换事件，实时向WebView注入样式：

1. 正常加载HTML：

func displayData() {
    guard let contentData = self.response?.data?.content else { return }
    self.webView.loadHTMLString(contentData, baseURL: nil)
}

2. 重写traitCollectionDidChange方法处理模式切换：

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    
    // 仅当明暗模式变化时执行
    guard traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) else {
        return
    }
    
    let textColor = traitCollection.userInterfaceStyle == .dark ? "#ffffff" : "#000000"
    // 构造要注入的CSS
    let css = """
        body, p, div, span {
            color: \(textColor) !important;
        }
    """
    // 用JS将样式插入到HTML头部
    let injectJS = "var styleEl = document.createElement('style'); styleEl.textContent = '\(css)'; document.head.appendChild(styleEl);"
    
    webView.evaluateJavaScript(injectJS) { _, error in
        if let err = error {
            print("注入样式失败：\(err)")
        }
    }
}

额外注意事项 #

• 如果动态HTML中存在内联style属性设置文本颜色，!important是必要的，否则无法覆盖
• 可根据WebView的背景色调整CSS中的颜色值，确保对比度符合需求

内容的提问来源于stack exchange，提问作者Anilkumar iOS Developer