[Rendering] Misleading background color of Adaptive Card in different Microsoft Teams applications

Target Platforms

Other

SDK Version

1.5

Application Name

Microsoft Teams

Problem Description

The same Adaptive Card have different background and border in different application:

• Microsoft Teams for Windows desktop
  • no border
  • light gray background
• Microsoft Teams Web app
  • dark border
  • light gray background
• Microsoft Teams Android app
  • dark border
  • white background

This inconsistency is confusing in terms of how the Adaptive Card is displayed.

Additional, light gray background color of Adaptive Card makes the Styling of the elements look terrible. Default Style "Good", "Attention" and "Emphasis" are not enough visible, as difference between gray and this style color is not big enough.

Screenshots

Microsoft Teams for Windows desktop (version 24102.2223.2870.9480):

Microsoft Teams Web app:

Microsoft Teams Android app (version: 1416/1.0.0.2024083602/0507):

Card JSON

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.5",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "items": [
            {
              "type": "TextBlock",
              "text": "Text",
              "wrap": true,
              "fontType": "Default",
              "size": "Small"
            }
          ]
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "TextBlock",
              "text": "Text",
              "fontType": "Default",
              "size": "Small",
              "horizontalAlignment": "Right"
            }
          ]
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Text",
      "height": "stretch",
      "wrap": true
    },
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "stretch",
          "style": "good",
          "items": [
            {
              "type": "TextBlock",
              "text": "False",
              "wrap": true,
              "horizontalAlignment": "Center",
              "height": "stretch",
              "fontType": "Default",
              "color": "default"
            }
          ]
        },
        {
          "type": "Column",
          "width": "stretch",
          "style": "emphasis",
          "items": [
            {
              "type": "TextBlock",
              "text": "true",
              "wrap": true,
              "horizontalAlignment": "Center",
              "fontType": "Default",
              "height": "stretch",
              "color": "default"
            }
          ]
        }
      ]
    }
  ]
}

Sample Code Language

No response

Sample Code

No response

Use the supplied Adaptive Card JSON as the reproduction input and compare its rendering in Microsoft Teams for Windows desktop, the web app, and Android. Done means the card's background and border behavior is consistent across those hosts and the Good, Attention, and Emphasis styles remain visibly distinguishable.