Microsoft Teams深色模式下Adaptive Card任务模块颜色异常问题

基本信息 #

• 客户端版本：Microsoft Teams 1.4.00.26376（64位），最后更新于2021年10月5日
• 涉及组件：Adaptive Card v1.3、Input.Text、TextBlock

问题表现 #

深色模式下加载Adaptive Card任务模块时，组件背景色显示错误；默认浅色模式下所有组件展示正常。

效果对比 #

• 深色模式异常效果：
• 浅色模式正常效果：

复现代码 #

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Text",
                            "color": "Accent",
                            "weight": "Bolder"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Text}",
                            "wrap": true,
                            "color": "Accent",
                            "weight": "Bolder"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Input.Text",
            "id": "Emails",
            "value": "${Emails}",
            "isMultiline": true,
            "placeholder": "Enter emails ... "
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Cancel"
        },
        {
            "type": "Action.Submit",
            "title": "Add",
            "id": "Add",
            "data": {
                "Type": "Add",
                "Action": "Add",
                "Id": "${Id}"
            }
        }
    ]
}

修复方案 #

该问题是对应版本Microsoft Teams对Adaptive Card v1.3的深色模式样式适配缺陷导致的，可通过以下任意一种方式修复：

1. 显式为Adaptive Card根节点、ColumnSet、Input.Text组件设置backgroundColor属性，可直接指定适配深色模式的颜色值#1E1E1E，也可接入Teams主题变量动态匹配不同显示模式的适配色。
2. 将Adaptive Card的版本号从1.3回退到1.2，该版本在对应Teams版本中无深色模式背景色适配问题。
3. 移除TextBlock的color: Accent显式声明，使用默认主题色配置，可避免深色模式下文字与背景对比度异常的问题。

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