SwiftUI中WKWebView的accessibilityIgnoresInvertColors属性失效求助

方法1：给WKWebView注入禁用反转的CSS #

系统智能反转会通过给页面元素添加滤镜实现，我们可以注入CSS强制网页忽略这个反转效果：

struct WebView: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        
        // 注入禁用颜色反转的CSS
        let antiInvertCSS = """
        @media (prefers-color-scheme: dark) {
            html {
                filter: invert(0) !important;
                background-color: #fff; /* 可选：确保背景色正常显示 */
            }
        }
        """
        let userScript = WKUserScript(
            source: antiInvertCSS,
            injectionTime: .atDocumentEnd,
            forMainFrameOnly: true
        )
        webView.configuration.userContentController.addUserScript(userScript)
        
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        // 加载你的网页内容
        if let url = URL(string: "https://example.com") {
            uiView.load(URLRequest(url: url))
        }
    }
}

方法2：确保正确设置accessibilityIgnoresInvertColors属性 #

直接给WKWebView实例设置该属性，注意要在makeUIView方法内配置，而不是结构体的属性：

struct WebView: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        // 关键：给WKWebView实例设置该属性
        webView.accessibilityIgnoresInvertColors = true
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        // 加载逻辑
    }
}

方法3：本地HTML直接添加CSS（适用于加载本地页面） #

如果是加载本地HTML文件，直接在<head>标签内添加样式：

<head>
    <style>
        @media (prefers-color-scheme: dark) {
            html {
                filter: invert(0) !important;
            }
        }
    </style>
</head>

最佳实践 #

建议同时使用方法1和方法2，双重保障：既给WKWebView本身设置忽略反转属性，又通过CSS强制网页内容不跟随系统反转，避免单一方法失效的情况。

内容的提问来源于stack exchange，提问作者Sayalee Pote