IssueTracker

Component used: WebView Version used: Webkit 1.12.1 Devices/Android versions reproduced on: Pixel 7 (Android 14), Samsung S21 (Android 12)

If I add a WebView inside a ModalBottomSheet in Jetpack Compose, it is displayed in dark-mode. The best would be if you watch the attached video. You surely will understand the problem right away.

Here is the code to reproduce the problem. You can find the whole source on GitHub:

class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyApplicationTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
                    var showWebView by remember { mutableStateOf(false) }

                    Column(modifier = Modifier.padding(innerPadding)) {
                        Button(onClick = { showWebView = true }) {
                            Text("Open")
                        }

                        WebView()
                    }

                    if (showWebView) {
                        ModalBottomSheet(
                            sheetState = sheetState,
                            onDismissRequest = {
                                showWebView = false
                            },
                            dragHandle = {},
                            shape = RectangleShape,
                        ) {
                            WebView()
                        }
                    }
                }
            }
        }
    }
}

@Composable
private fun WebView() {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                webViewClient = WebViewClient()
                settings.javaScriptEnabled = true
            }
        },
        update = { webView ->
            webView.loadUrl("https://www.srf.ch/")
        },
        modifier = Modifier
            .fillMaxSize()
    )
}

Since the web content dark theme is displayed according to isLightTheme, I checked it. And I can confirm that the ´isLightTheme´ property is always set to true for the context, that creates the WebView.

I also opened a ticket, since it may be a problem on the Material3 Jetpack Compose side.