Dark theme of webview doesn't work in AndroidView Jetpack compose

Question

Dark theme of webview doesn't work in AndroidView Jetpack compose.

RichEditor extend webview.

No errors. Simply can't apply dark theme to view

implementation 'jp.wasabeef:richeditor-android:2.0.0'
@Composable
fun Webview{
  AndroidView(
        factory = { context ->
            RichEditor(context).apply {
                setEditorHeight(40)
                setPadding(10, 10, 10, 10)
                loadCSS("file:///android_asset/style.css")
                if (isFeatureSupported(WebViewFeature.ALGORITHMIC_DARKENING)) {
                    WebSettingsCompat.setAlgorithmicDarkeningAllowed(settings, true)
                }
                setOnTextChangeListener {
                    scope.launch {

                    }
                }
            }
        },
        update = {
        },
        )
}

Answer 1

It's not working because simply RichEditor (or WebView) does not support dark mode by itself. You can use public functions to adjust it's look based on dark theme:

@Composable
fun Webview() {

    //Colors based on system theme
    val isDark = isSystemInDarkTheme()
    val textColor = remember(key1 = isDark) { if (isDark) Color.White else Color.Black }
    val backgroundColor = remember(key1 = isDark) { if (isDark) Color.Black else Color.White }

    AndroidView(
        factory = { context ->
            RichEditor(context).apply {
                setEditorHeight(40)
                setPadding(10, 10, 10, 10)
                loadCSS("file:///android_asset/style.css")
                //Sets background color
                this.setEditorBackgroundColor(backgroundColor.toArgb())
                //Sets text color                
                this.setEditorFontColor(textColor.toArgb())
                if (isFeatureSupported(WebViewFeature.ALGORITHMIC_DARKENING)) {
                    WebSettingsCompat.setAlgorithmicDarkeningAllowed(settings, true)
                }
                setOnTextChangeListener {
                    scope.launch {

                    }
                }
            }
        },
        update = {

        },
    )