Balloon content not visible in dark theme

[Breens-Mbaka]

Please complete the following information:

• Library Version [e.g. v1.5.2]
• Affected Device(s): All devices

Describe the Bug: The content of the balloon isn't visible in the dark theme

Expected Behavior: The content of the ballon should be visible both in dark and light theme

[skydoves]

Hey @Breens-Mbaka, would you describe the details? It would be good if you can contain several code snippets and the result (screenshot). Also, do you use Compose or XML?

[skydoves]

The demo project works well in dark theme since I've only used dark theme on my devices.

[Breens-Mbaka]

Hi @skydoves I'm using Compose and the issue comes up when I change from light theme to dark theme.

here is the code and screenshot of the balloon not adapting to the dark theme:

[skydoves]

They @Breens-Mbaka, Balloon doesn't apply any Compose theme (Material, Material3, or custom themes), due to providing flexibility to users. So you should apply background color or text color depending on your theme.

balloonContent = {
 Box(modifier = Modifier.background(MaterialTheme.colors.background)) {
  Text(
      color = //
   )
 }
}

The most recommended way is setting the colors when you build the Balloon.Builder like the example below:

      val background = MaterialTheme.colors.background
      val textColor = if (isSystemInDarkTheme()) {
        Color.White
      } else {
        Color.Black
      }

      val builder = rememberBalloonBuilder {
        setBackgroundColor(background)
        setTextColor(textColor)
        setArrowSize(10)

[Breens-Mbaka]

Thanks @skydoves it has worked. I propose maybe this can be explicitly added to the README if it doesn't exist, so that people who have a challenge like mine will be helped and avoid raising the same issue again. What do you think ?

[skydoves]

Hey @Breens-Mbaka, thank you for your report and feedback!