如何在Android中的浮动webview中显示暗模式网页

Question

我有一个 Android 应用程序，我想在黑暗模式下显示网页，覆盖在其他应用程序之上（使用 Android 绘制应用程序工具）。我正在使用 webview 和 windowmanager 来创建浮动视图。

我想要定位 Android 9 / API 28，以便我可以将该应用程序与 Amazon Fire TV 一起使用。

相关网页来自 Home Assistant。深色模式可以在家庭助手中设置为自动、深色或浅色。出于本文的目的，我在 HA 设置中设置了深色模式。当 HA 页面加载时，它会在显示最终屏幕之前显示“正在加载数据”启动屏幕。我遇到的问题是启动画面显示为浅色，而最终的 HA 屏幕在深色模式下正确显示。

HA 团队建议，启动画面根据浏览器设置显示为浅色或深色。所以，看来需要在webview上设置深色模式。

但是，在我的测试代码中，我实现了一个测试，其中使用了 webview 但不是浮动的，它是全屏的。在此测试中，启动画面正确地变暗。以下是测试：

工作，但不漂浮

widget_web.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fadingEdge="vertical"
    android:padding="8dp"
    android:visibility="visible" />

MainActivity.kt

    setContentView(R.layout.widget_web)
    myWebView = findViewById<View>(R.id.web_view) as WebView
    myWebView.settings.javaScriptEnabled = true
    myWebView.setInitialScale(100)
    myWebView.addJavascriptInterface(WebViewJavascriptInterface(applicationContext), "externalApp")
    myWebView.loadUrl("http://192.168.1.73:8123/dashboard-studyonly?external_auth=1")

启动画面（黑色，因为我需要它）

黑人家庭助理页面：

不工作，但浮动

MainActivity.kt

    lateinit var windowManager: WindowManager
    lateinit var floatView: ViewGroup
    lateinit var mParentView: ViewGroup
    lateinit var floatWindowLayoutParam: WindowManager.LayoutParams

    setContentView(R.layout.widget_web)
    floatWindowLayoutParam = WindowManager.LayoutParams(
        1000,1000,
        WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
        WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
        PixelFormat.TRANSLUCENT
    )

    windowManager = getSystemService(WINDOW_SERVICE) as WindowManager
    val inflater: LayoutInflater =
        baseContext.getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater

    mParentView = FrameLayout(this)
    windowManager.addView(mParentView, floatWindowLayoutParam) //add mParentView to window with assigned parameters
    floatView = inflater.inflate(R.layout.widget_web, null) as ViewGroup //floatView holds the webView
    floatView.visibility = View.GONE
    mParentView.addView(floatView) // add floatView (webView) as child to mParentView
    myWebView = floatView.findViewById(R.id.web_view) as WebView
    myWebView.settings.javaScriptEnabled = true
    myWebView.settings.domStorageEnabled = true
    myWebView.setInitialScale(100)
    myWebView.addJavascriptInterface(WebViewJavascriptInterface(applicationContext), "externalApp")
    myWebView.loadUrl("http://192.168.1.73:8123/dashboard-studyonly?external_auth=1")
    myWebView.requestFocus()
    myWebView.visibility = View.VISIBLE
    finish() // hide the background of the app

启动画面，白色不是黑色：

黑色 HA 主题，根据需要（但由 HA 设置驱动，而不是 Web 视图）：

Answer 1

试试这个

    floatWindowLayoutParam = WindowManager.LayoutParams(
            1000, 1000,
            WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
            PixelFormat.TRANSLUCENT
        )

        windowManager = getSystemService(WINDOW_SERVICE) as WindowManager
        val inflater: LayoutInflater = getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater

        mParentView = FrameLayout(this)
        windowManager.addView(mParentView, floatWindowLayoutParam)
        
        floatView = inflater.inflate(R.layout.widget_web, mParentView, false) as ViewGroup
        floatView.visibility = View.GONE
        mParentView.addView(floatView) 
        
        myWebView = floatView.findViewById(R.id.web_view) as WebView
        myWebView.settings.javaScriptEnabled = true
        myWebView.settings.domStorageEnabled = true
        myWebView.setInitialScale(100)
        myWebView.addJavascriptInterface(WebViewJavascriptInterface(applicationContext), "externalApp")
        
        myWebView.webViewClient = object : WebViewClient() {
            override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                injectDarkModeCSS(view)
            }
        }

        myWebView.loadUrl("http://192.168.1.73:8123/dashboard-studyonly?external_auth=1")
        myWebView.requestFocus()
        myWebView.visibility = View.VISIBLE
        finish() 
    }

    private fun injectDarkModeCSS(webView: WebView?) {
        val css = "(function() {" +
                  "document.body.style.backgroundColor = 'black';" +
                  "document.body.style.color = 'white';" +
                  "})()"
        webView?.evaluateJavascript("javascript:$css", null)
    }
}