Управление цветом темы Canvas-контейнера

Обновлено 22 ноября 2023

По умолчанию для Canvas-контейнера всегда установлена темная тема. Чтобы ее изменить, установите значение true для параметра allowLightCanvas. В этом случае у Canvas-контейнера будет текущая тема чата (параметр themeColor).

CanvasApp всегда получает информацию о текущей теме при ее установке и смене в формате объекта AssistantThemeCommand.

CanvasApp может не поддерживать светлую тему и отображаться неправильно.

Пример использования параметра allowLightCanvas для разных видов чата с ассистентом:

import React, { FC } from 'react';
import { FloatingAssistantChatLottie } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';
import { Chat } from '@sberdevices/assistant-web-sdk/chat';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';

export const ChatWithAssistant: FC = () => {
    return <Chat {...props} themeColor="light" allowLightCanvas />;
};

export const FloatingChatWithAssistant: FC = () => {
    return <FloatingAssistantChatLottie {...props} themeColor="light" allowLightCanvas />;
};

export const BarWithAssistant: FC = () => {
    return <AssistantBar {...props} themeColor="light" allowLightCanvas />;
};