Microsoft Teams自适应卡片深色模式颜色显示异常问题咨询

问题原因 #

该深色模式配色异常是因为Microsoft Teams中加载的自适应卡片默认未开启主题继承，无法自动适配客户端当前的深浅色主题配置，导致输入框等组件沿用浅色模式配色，在深色模式下出现文字、背景对比度异常的问题。

解决方案 #

在Adaptive Card根配置中新增Teams专属的msTeams扩展属性，开启主题继承即可解决适配问题，修改后的代码如下：

public async handleTeamsMessagingExtensionFetchTask(
    context: TurnContext,
    action: any
  ): Promise<any> {
    const adaptiveCard = CardFactory.adaptiveCard({
      "type": "AdaptiveCard",
      // 新增以下配置开启Teams主题继承
      "msTeams": {
        "allowThemeInheritance": true
      },
      "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
        }
      }
    };
  }

如果开启主题继承后仍有局部组件配色不符合预期，可以使用Teams内置的主题变量来定义组件样式，所有变量会自动跟随当前主题切换对应配色，无需手动判断主题类型。若适配效果仍不理想，可将Adaptive Card的version字段从1.3升级到1.4或更高版本，获得更好的主题兼容性。

内容的提问来源于stack exchange，提问作者Sylnois