Виджет веб-чата: светлая и тёмная схема

Цветовая схема находится на странице настроек канала веб-чата (Настройки проекта → Каналы → ваш канал веб-чата), в разделе Внешний вид, под ссылкой Дополнительные настройки. У неё три значения: Светлая, Тёмная и Как на сайте.

По умолчанию выбрана схема Светлая. Смена стиля виджета эту настройку не меняет. Виджет сообщает браузеру, какую схему он использует, поэтому системные полосы прокрутки, поля ввода и автозаполнение внутри чата соответствуют схеме, а не остаются на усмотрение устройства посетителя.

Как «Как на сайте» принимает решение

Сначала читается ваша страница, и только если она не говорит ничего, дело доходит до системной настройки посетителя. По порядку:

• Тема, объявленная на <html> или <body>: data-theme, data-color-mode, data-bs-theme или data-color-scheme со значением dark либо light, а также класс dark, dark-mode или theme-dark (и их светлые аналоги). Это учитывается в обе стороны, поэтому страница, объявившая светлую тему, останется светлой, даже если устройство посетителя настроено на тёмную.
• Объявление CSS color-scheme. И color-scheme: dark, и color-scheme: only dark считаются решением; color-scheme: light dark решением не является и передаётся дальше.
• Фон страницы — первый непрозрачный фон, найденный на <body>, затем на <html>. Тёмный фон означает тёмную схему.
• И только если ничего из перечисленного не подошло — системная настройка посетителя.

Поскольку почти каждая реальная страница закрашивает сплошной фон, обычно решает третий шаг, а до системной настройки дело не доходит. Белая страница откроет светлый виджет даже посетителю, у которого устройство в тёмном режиме; так и задумано, потому что тёмный виджет на светлой странице выглядит как поломка. Значения сопоставляются строго, поэтому data-theme="midnight" или data-theme="corporate-dark" сигналом не считается и передаётся дальше.

Схема перепроверяется на лету. Переключатель темы на вашем сайте переключает вместе с собой и виджет, а изменение системной настройки посетителя подхватывается без перезагрузки страницы. Если на вашей странице светлое содержимое обёрнуто в тёмную оболочку, проверка фона может прочитать её как тёмную; объявите data-theme на <html>, чтобы снять неоднозначность.

Цвет бренда в тёмной схеме

Цвет бренда (тёмная) появляется в том же блоке Дополнительных настроек, как только «Цветовая схема» переключена на Тёмная или Как на сайте. Если оставить поле пустым, виджет выводит цвет из вашего Цвета виджета: по-настоящему тёмный цвет осветляется с сохранением оттенка, а цвет средней яркости или светлый используется без изменений. Поэтому яркий синий или зелёный бренд выглядит одинаково в обеих схемах — это ожидаемый результат, а не ошибка. Если вы задаёте значение, это должен быть цвет в шестнадцатеричном виде; всё остальное игнорируется и используется выведенный цвет. Этот же цвет задаёт два оттенка AI-сферы, которые пересчитываются при каждой смене схемы.

Как переопределить схему со своего сайта

Два способа обхода, и оба имеют приоритет над настройкой канала.

Добавьте data-theme в код для встраивания. Он принимает light, dark или auto:

<script async src="https://chatonio.com/widget/loader.js"
        data-channel-id="YOUR-CHANNEL-ID"
        data-theme="dark"></script>

Атрибут читается один раз при загрузке виджета, поэтому его изменение позже ни на что не влияет, а если на странице несколько фрагментов кода встраивания, читается только последний.

Либо вызовите chatonio('theme', 'dark') — также 'light' или 'auto', — и виджет перекрасится сразу. Если строка-инициализатор из статьи Виджет веб-чата: управление чатом из кода сайта уже добавлена, вызов, сделанный до монтирования виджета, учитывается на первой отрисовке, так что мигания неправильной темы не будет. Нераспознанное значение игнорируется с сообщением в консоли и не сбрасывает установленное вами ранее переопределение; вызов со значением 'auto' — единственный способ вернуться к определению по странице до конца этого просмотра.

При схеме Как на сайте виджетом можно управлять и чисто из своей разметки, объявив на <html> или <body> один из перечисленных выше атрибутов или классов. Именно это позволяет собственному переключателю темы сайта управлять виджетом без какой-либо интеграции на JavaScript.

Всплывающие окна и панель капчи

Всплывающие окна на сайте следуют той же цветовой схеме, и панель капчи тоже, когда она показывается. Любой цвет, заданный вами в кампании всплывающих окон, сохраняется в обеих схемах, поэтому полностью оформленная кампания выглядит в тёмной схеме так же, и меняется только то, что вы не задали. На странице, где виджет исключён вашими правилами доменов или URL, всплывающие окна всё равно работают, но всегда отрисовываются в светлой схеме, потому что схему определяет виджет, который там не загружается.