WebView inside ModalBottomsheet shows in dark mode [391118562]

Assigned

Bug

Status Update

No update yet.

Description

an...@gmail.com

created issue #1

Jan 20, 2025 03:37PM

Jetpack Compose version: 2025.01.00

Material Library Version (M2, M3 or Both?): 1.3.1

Material Compose component used: ModalBottomSheet

Kotlin version: 2.0.0

Steps to Reproduce or Code Sample to Reproduce:

I noticed a strange behavior. Since 1.3.1 or maybe 1.3.0 WebViews inside a ModalBottomSheet display it's content in dark mode. According to the documentation, the WebView do set the dark mode based exclusively upon the isLightTheme theme property. I guess, that this property is somehow overwritten by ModalBottomSheet, but I am currently not able to find that out exactly where.

In previous versions (1.2.1) the website showed the content as expectet (dark content only in night mode). The same WebView outside of the ModalBottomSheet is also rendered as expected.

setContent {
  MyApplicationTheme {
    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
      val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
      var showWebView by remember { mutableStateOf(false) }
      Button(onClick = { showWebView = true }) {
        Text("Open")
      }

      if (showWebView) {
         ModalBottomSheet(
           sheetState = sheetState,
           onDismissRequest = {
             showWebView = false
           },
           dragHandle = {},
           shape = RectangleShape,
           contentWindowInsets = { WindowInsets(0, 0, 0, 0) }
         ) {
           AndroidView(
             factory = { context ->
               WebView(context).apply {
                 webViewClient = WebViewClient()
                 settings.javaScriptEnabled = true
               }
             },
             update = { webView ->
               webView.loadUrl("https://www.srf.ch/")
             },
             modifier = Modifier
               .fillMaxSize()
            )
          }
       }
     }
  }
}

Comments

ke...@google.com <ke...@google.com> #2Jan 22, 2025 12:35AM

Hi, can you provide some screenshot/recording showing the rendering result of the code above.

Please make sure to explain what is the expected and actual behavior. Thanks!

an...@gmail.com <an...@gmail.com> #3Jan 22, 2025 12:46PM

The code above is a abstraction of our app. You can find a recording of the problem in the attachments. In the beginning of the video you can see the home screen where it's written "Zu teuer: Zugerinnen...." this is also a WebView. It is displayed correctly in light-mode. After that, I open a ModalBottomSheet. Inside the ModalBottomSheet I open "Impressum", which again is a WebView. This time, the WebView is displayed in dark-mode.

The two WebView's are the same Composable, so they itself are the same implementation. The only difference between them is the context, in which they are displayed (one time in a ModalBottomSheet and one time without it).

If you need more information, don't hesitate to ask :)

Screen_recording_20250122_133843.mp4

2.8 MB

Download

an...@gmail.com <an...@gmail.com> #4Jan 23, 2025 10:57AM

Comment has been deleted.

Message last modified on Jan 23, 2025 11:08AM

deleted

0 B

an...@gmail.com <an...@gmail.com> #5Jan 23, 2025 03:50PM

Here you can find the full code on GitHub to reproduce the bug.

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. But still, it gets displayed in dark theme.

ul...@gmail.com <ul...@gmail.com> #6Feb 17, 2025 03:51PM

The issues seems to lie in the theme that is applied within the ModalBottomSheetDialogWrapper.

It uses a ContextThemeWrapper and applies androidx.compose.material3.R.style.EdgeToEdgeFloatingDialogWindowTheme as an overlay to the current compose-view's context.
This theme then sets the dialog theme <item name="android:dialogTheme">@style/EdgeToEdgeFloatingDialogTheme</item>.
But if we follow the inheritance of the applied dialog theme EdgeToEdgeFloatingDialogTheme we end up at @android:Theme which specifies <item name="isLightTheme">false</item> 💥

Minimal steps to reproduce are

Apply a day / night XML theme to your App (WebViews respect the isLightTheme attribute to display their content accordingly)
Add a WebView that supports day/night to the normal content of your App
Add a WebView that supports day/night to a ModalBottomSheet
Switch between day/night mode on your device --> The WebView in the normal content will follow accordingly, the one in the ModalBottomSheet will always be displayed in dark mode

Minimal sample attached.

Compose WebView Bottom Sheet.zip

111 KB

Download

se...@google.com <se...@google.com> Feb 18, 2025 04:28PM

Reassigned to se...@google.com.

Issue 391118562