求助：WordPress站点适配Android深色模式时波浪Divider背景异常问题

问题根源 #

prefers-color-scheme: dark媒体查询无效，通常是因为WebView未向网页传递系统深色模式状态，或者Elementor生成的形状分隔线内联样式优先级高于自定义CSS。以下是三种可行解决方案：

方案1：配置WebView传递深色模式偏好 #

修改Kotlin代码，让WebView根据系统主题自动适配深色模式，确保网页能识别prefers-color-scheme：

@SuppressLint("SetJavaScriptEnabled")
fun loadweburlfunction() {
    webView.settings.javaScriptEnabled = true
    
    // 配置WebView深色模式适配
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        webView.settings.forceDark = WebSettings.FORCE_DARK_AUTO
        webView.settings.forceDarkStrategy = WebSettings.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY
    } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        val nightMode = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
        if (nightMode == Configuration.UI_MODE_NIGHT_YES) {
            webView.settings.setForceDark(true)
        }
    }
    
    webView.webViewClient = WebViewClient()
    webView.loadUrl(weburl)
}

同时更新CSS，提升选择器优先级覆盖Elementor内联样式：

@media (prefers-color-scheme: dark) {
    .elementor-shape .elementor-shape-fill[fill] {
        fill: #282727 !important;
    }
}

方案2：通过JS动态修改样式 #

如果WebView的系统偏好传递仍失效，可在网页加载完成后注入JavaScript，直接检测深色模式并修改形状分隔线颜色：

@SuppressLint("SetJavaScriptEnabled")
fun loadweburlfunction() {
    webView.settings.javaScriptEnabled = true
    
    webView.webViewClient = object : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            // 注入JS动态修改深色模式下的形状填充色
            val darkModeFixJs = """
                (function() {
                    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
                    function updateShapeColor() {
                        const fills = document.querySelectorAll('.elementor-shape .elementor-shape-fill');
                        fills.forEach(el => el.setAttribute('fill', darkQuery.matches ? '#282727' : el.getAttribute('data-original-fill') || '#ffffff'));
                    }
                    // 初始化时更新
                    updateShapeColor();
                    // 监听模式切换
                    darkQuery.addEventListener('change', updateShapeColor);
                })();
            """.trimIndent()
            webView.evaluateJavascript(darkModeFixJs, null)
        }
    }
    
    webView.loadUrl(weburl)
}

方案3：WordPress端Elementor直接配置 #

无需修改App代码，在Elementor编辑器中给目标形状分隔线添加深色模式专属样式：

1. 选中形状分隔线组件，打开「高级」选项卡
2. 在「自定义CSS」中添加：

@media (prefers-color-scheme: dark) {
    {{WRAPPER}} .elementor-shape-fill {
        fill: #282727 !important;
    }
}

{{WRAPPER}}是Elementor内置变量，会替换为组件的父容器选择器，优先级高于全局CSS。

内容的提问来源于stack exchange，提问作者Pranav Chaudhari