Русский

English

Русский

English

Темизация ​

Тему виджета можно полностью перекрасить с хост-страницы без пересборки бандла. Все параметры темы проходят через единый пайплайн конфига (см. Конфигурацию): задавайте их в widget.config.js, window.MZBOT_CONFIG, атрибутом data-mz-* или вживую через MZBOT.setTheme({...}).

Цветовая схема ​

Четыре режима: light · white · dark · auto.

Через атрибут data-mz-theme на <html> (рекомендуется) ​

Виджет вживую отслеживает data-mz-theme на <html> и реагирует немедленно:

js
document.documentElement.setAttribute('data-mz-theme', 'dark');   // тёмная
document.documentElement.setAttribute('data-mz-theme', 'light');  // светлая
document.documentElement.setAttribute('data-mz-theme', 'white');  // намного светлее light
document.documentElement.setAttribute('data-mz-theme', 'auto');   // следовать за ОС

Можно задать статически в разметке — применится на загрузке:

html
<html data-mz-theme="dark">

Невалидные значения игнорируются; удаление атрибута оставляет текущую тему. Обратной петли нет: виджет пишет собственное состояние на хост <mz-bot>, но никогда обратно в <html>.

Через JS-API ​

js
MZBOT.setTheme('dark');                  // короткая форма
MZBOT.setTheme({ theme: 'dark' });       // объектная форма
MZBOT.getTheme();                         // → { theme, resolvedTheme, accent, ... }
MZBOT.subscribe((t) => console.log(t));   // подписка на изменения; возвращает unsubscribe

Начальный конфиг (до загрузки бандла) ​

html
<script src="bundle.min.js" data-mz-theme="dark" data-mz-accent="#0dbb52" defer></script>
<!-- или -->
<script>window.MZBOT_CONFIG = { theme: 'dark' };</script>

Акцент и паттерн ​

js
MZBOT.setTheme({
  accent: '#0dbb52',     // любой CSS-цвет — красит всё тематическое
  pattern: 'mesh',       // none | whisper | mesh | scales | bloom | cipher | prism
  patternOpacity: 0.08,  // 0..1
  patternScale: 1.5,     // 0.25..4
});

Доступные паттерны: MZBOT.patterns. Анимации: MZBOT.animations. Темы: MZBOT.themes.

Акцентное свечение (glow) ​

Свечение (halo из box-shadow) вокруг открытого виджета, переключаемое по разрешённой теме.

js
// widget.config.js
theme: {
  glow: {
    dark:      true,   // свечение, когда активна тёмная тема
    light:     false,  // без свечения на светлой
    intensity: 1,      // множитель силы (1 = дефолт; ~0.1..5)
  },
}

Рантайм:

js
MZBOT.setGlow({ dark: true, light: true, intensity: 2 });
MZBOT_CONFIG = { glow: { dark: true, intensity: 1.5 } };

intensity масштабирует размытие halo и прозрачность акцента (clamp ~0.1–5). Свечение следует за активной темой автоматически (включая auto и живые переключения data-mz-theme): theme.js ставит data-mz-glow на хост, что переключает --mz-widget-shadow. Видно только при открытом виджете.

Фон чата ​

Две независимых ручки кастомизируют область сообщений.

Градиент / заливка (bgColors / bgAngle) ​

Перекрывает дефолтную поверхность темы своим цветом или градиентом:

js
MZBOT.setTheme({ bgColors: ['#1b2735', '#283e51', '#0a1622'], bgAngle: 160 }); // 3-цветный градиент
MZBOT.setTheme({ bgColors: ['#0d4f2b'] });                                      // один цвет = заливка
MZBOT.setTheme({ bgColors: 'radial-gradient(circle at 30% 0%, #2a5298, #0a1622)' }); // сырой CSS
MZBOT.setTheme({ bgColors: 'none' });                                           // вернуть поверхность темы
  • bgColors — массив из 1..n CSS-цветов (1 = заливка; 2+ = linear-gradient), строка через запятую (удобно для data-mz-bg-colors), или полная CSS-background-строка (любой *-gradient(...)) — используется как есть. 'none' очищает.
  • bgAngle — направление градиента в градусах (дефолт 160). Игнорируется для одного цвета и сырой строки.

Градиент заменяет поверхность во всех темах (это явный оверрайд) — подбирайте цвета под палитру.

Бесшовное изображение-оверлей (patternImage) ​

Тайлит прозрачное изображение-паттерн поверх фона. Либо/либо со встроенными pattern: когда задан patternImage, он заменяет SVG-паттерн (изображение побеждает); patternImage: 'none' возвращает SVG.

js
MZBOT.setTheme({
  patternImage:        'https://cdn.morze.tech/patterns/topography.png',
  patternImageOpacity: 0.5,    // 0..1 (своя альфа PNG тоже применяется)
  patternImageSize:    280,    // px-тайл или любой CSS background-size
});

MZBOT.setTheme({ patternImage: 'none' });   // убрать оверлей
  • patternImage — URL. Принимаются http(s)://, протокол-относительные (//), корневые/относительные (/…, ./…) и data:image/…; остальное (или URL с небезопасными символами) отклоняется. 'none'/'' — выкл.
  • patternImageSize — число (px-ширина тайла, высота авто) или любой CSS background-size.

Через атрибуты загружающего скрипта ​

html
<script src="bundle.min.js"
        data-mz-bg-colors="#1b2735,#283e51,#0a1622"
        data-mz-bg-angle="160"
        data-mz-pattern-image="https://cdn.morze.tech/patterns/topography.png"
        data-mz-pattern-image-opacity="0.5"
        data-mz-pattern-image-size="280"
        defer></script>

Анимация сообщений ​

js
MZBOT.setTheme({ msgAnimation: 'unfurl' });  // bubble | unfurl | cascade | pop | breathe

Все методы темы — на странице JavaScript API.