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