Microsoft Teams自适应卡-深色模式颜色问题

Question

我试图为微软团队开发一个简单的消息扩展应用程序。通过使用Task Modules，我可以加载一个简单的Adative Card。按照设计工作。我唯一的问题是，我的适配卡在黑暗模式下与微软团队有颜色问题。

请看下图。1展示了一个通过https://adaptivecards.io/designer/ (预览模式)设计的非常简单的适配卡。2非常相同的适配卡，但现在是来自微软团队的实际片段。正如你所看到的，下面的卡片有一些颜色问题，这使得输入很难看到。

​

​

下面是我使用的代码：

public async handleTeamsMessagingExtensionFetchTask(
    context: TurnContext,
    action: any
  ): Promise<any> {
    const adaptiveCard = CardFactory.adaptiveCard({
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "TextBlock",
          "size": "Medium",
          "weight": "Bolder",
          "text": "${title}"
        },
        {
          "type": "Input.Text",
          "placeholder": "Placeholder text"
        }
      ],
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Submit"
        }
      ],
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.3"
    });

    return {
      task: {
        type: 'continue',
        value: {
          card: adaptiveCard,
          height: 535,
          title: '${title}',
          url: null,
          width: 500
        }
      }
    };
  }

Answer 1

在这种情况下，对输入框本身没有什么可以做的，但也许可以尝试更改它上面标签的颜色，比如这样(我也更改了您的一些属性名称，因为它们是无效的大小写-比如"medium“而不是"Medium"：

          "size": "medium",
          "weight": "bolder",
          "text": "${title}",
          "color": "good"

Color允许以下值：“默认”“暗”“亮”“重音”“好”“警告”“注意”

Answer 2

如果您将文本输入嵌套到Container中，则可以更改Container的样式以提供文本输入所在的彩色背景。

它不一定适合您的用例，但它可能是您感兴趣的变通方法

Container Style colour options

​

{
    "type": "Container",
    "style": "emphasis",
    "bleed": true,
    "items": [
        {
            "type": "TextBlock",
            "text": "Request New Ticket",
            "wrap": true,
            "fontType": "Default",
            "style": "heading",
            "size": "Large",
            "color": "Good",
            "weight": "Bolder",
            "horizontalAlignment": "Center"
        }
    ]
}

​