Search code examples
microsoft-teamsadaptive-cardsdarkmode

Task modules with adaptive cards in Microsoft Teams


I use adaptive card in the task module, however it looks very strange in the dark theme of Microsoft Teams (white background). How can this problem be corrected?

Schema version 1.3 (example): AdaptiveCard adaptiveCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 3));

Result

P.S.

Example card in json format:

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "size": "large",
      "weight": "bolder",
      "text": "YouTrackBot помощь"
    },
    {
      "type": "TextBlock",
      "text": "Это базовая страница по YouTrackBot, подробная информация расположена в соответсвующих разделах.",
      "wrap": true
    }
  ],
  "actions": [
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как получить свой токен YouTrack?"
          },
          {
            "type": "TextBlock",
            "text": "1) Зайти в свой профиль YouTrack;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Во вкладке 'Общее' выбрать 'Обновление анкетных данных и управление логинами';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) Перейти во вкладку 'Аутентификация';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "4) Далее нажимаем на кнопку 'Новый токен';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "5) В окне создания токена важно, чтобы были указаны области 'YouTrack' и 'YouTrack Administation', имя - произвольное;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "6) После - нажимаем создать и копируем токен (Внимание! Посмотреть токен возможности больше не будет, поэтому его лучше сохранить в удобном для себя месте).",
            "wrap": true
          }
        ]
      },
      "title": "Как получить токен"
    },
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как настроить YouTrackBot?"
          },
          {
            "type": "TextBlock",
            "text": "Сперва необходимо изучить, как получить свой токен (инструкция есть у бота);",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Разобравшись с токеном можно приступать к настройке, она делается просто, за несколько шагов;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "1) Первый шаг - необходимо указать URL YouTrack'а, который планируется использовать;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Второй шаг - необходимо указать уже известный токен;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) Третий шаг - нажать кнопку 'Подтвердить';",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Если все хорошо, цвет текста станет зеленым и это означает, что подключение настроено;",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "Если возникнет ошибка, то появится соответствующая надпись, которая означает, что URL и/или токен введены с ошибкой и бот не смог подключиться к YouTrack.",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "(Внимание! Варианты URL формата: <https://example.myjetbrains.com>/<example.myjetbrains.com>/<example.myjetbrains>)",
            "wrap": true
          }
        ]
      },
      "title": "Как настроить приложение"
    },
    {
      "type": "Action.ShowCard",
      "card": {
        "type": "AdaptiveCard",
        "version": "1.3",
        "body": [
          {
            "type": "TextBlock",
            "size": "large",
            "weight": "bolder",
            "text": "Как использовать YouTrackBot?"
          },
          {
            "type": "TextBlock",
            "text": "Создание задачи из сообщения:",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "1) Необходимо навести на сообщение, нажать на троеточие в правом верхнем углу",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "2) Выбрать 'Дополнительные действия'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "3) В новом списке нужно выбрать 'Создать новую задачу в YouTrack'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "4) В открытой форме нужно выбрать проект, где будет созадана задача, и нажать продолжить",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "5) Заголовок и описание заполняются сами, но Вы можете их отредактировать",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "6) Длаее необходимо заполнить обязательные поля для задачи и по желанию заполнить оставшиеся поля, которые для создания задачи не обязательны",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "7) Нажать кнопку 'Создать'",
            "wrap": true
          },
          {
            "type": "TextBlock",
            "text": "8) Если задача была успешно создана, в чате, в предпросмотре сообщения, появится карточка, которая содержит краткую информацию о задаче и ссылку на YouTrack",
            "wrap": true
          }
        ]
      },
      "title": "Как работать с приложением"
    }
  ]
}

Solution

  • Found that the problem only occurs in the regular version of Teams. Everything is displayed correctly in the developer version.