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

Question

我正在尝试为 Microsoft Teams 开发一个简单的消息传递扩展应用程序。 通过使用任务模块，我可以加载一个简单的 Adative Card。 按设计工作。 我遇到的唯一问题是我的自适应卡在黑暗模式下使用 Microsoft Teams 时存在颜色问题。

看看下面的图片。 1显示了通过https://adaptivecards.io/designer/ （预览模式）设计的非常简单的自适应卡。 2完全相同的自适应卡，但现在是 Microsoft Teams 的实际片段。 正如您所看到的，下面的卡片有一些颜色问题，这使得输入很难看清。

这是我使用的代码：

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

在这种情况下，输入框本身没有太多可以做的事情，但也许可以尝试更改其上方标签的颜色，就像这样（我也更改了您的一些属性名称，因为它们是无效的大小写-像“中等”而不是“中等”之类的东西：

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

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

Answer 2

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

它不一定适合您的用例，但它可能是一种有趣的解决方法

容器样式颜色选项

 { "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" } ] }