English

Русский

English

Русский

Theming ​

The widget's theme can be fully recolored from the host page without rebuilding the bundle. All theme parameters flow through the same config pipeline (see Configuration): set them in widget.config.js, window.MZBOT_CONFIG, a data-mz-* attribute, or live via MZBOT.setTheme({...}).

Color scheme ​

Four modes: light · white · dark · auto.

The widget live-observes data-mz-theme on <html> and reacts immediately:

js
document.documentElement.setAttribute('data-mz-theme', 'dark');   // dark
document.documentElement.setAttribute('data-mz-theme', 'light');  // light
document.documentElement.setAttribute('data-mz-theme', 'white');  // much lighter than light
document.documentElement.setAttribute('data-mz-theme', 'auto');   // follow the OS

You can also set it statically in markup — it applies on load:

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

Invalid values are ignored; removing the attribute leaves the current theme unchanged. There's no feedback loop: the widget writes its own state onto the <mz-bot> host, never back onto <html>.

Via the JS API ​

js
MZBOT.setTheme('dark');                  // string shorthand
MZBOT.setTheme({ theme: 'dark' });       // object form
MZBOT.getTheme();                         // → { theme, resolvedTheme, accent, ... }
MZBOT.subscribe((t) => console.log(t));   // listen for changes; returns an unsubscribe fn

Initial config (before the bundle loads) ​

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

Accent & pattern ​

js
MZBOT.setTheme({
  accent: '#0dbb52',     // any CSS color — colors everything themed
  pattern: 'mesh',       // none | whisper | mesh | scales | bloom | cipher | prism
  patternOpacity: 0.08,  // 0..1
  patternScale: 1.5,     // 0.25..4
});

Available patterns: MZBOT.patterns. Animations: MZBOT.animations. Themes: MZBOT.themes.

Accent glow ​

A glow (box-shadow halo) around the open widget, toggleable per resolved theme.

js
// widget.config.js
theme: {
  glow: {
    dark:      true,   // glow when the dark theme is active
    light:     false,  // no glow on light
    intensity: 1,      // strength multiplier (1 = default; ~0.1..5)
  },
}

Runtime:

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

intensity scales the halo blur and the accent opacity (clamped to ~0.1–5). The glow follows the active theme automatically (including auto and live data-mz-theme switches): theme.js sets data-mz-glow on the host, which swaps --mz-widget-shadow. Only visible while the widget is open.

Chat background ​

Two independent knobs customize the message area.

Gradient / fill (bgColors / bgAngle) ​

Overrides the theme's default surface with your own color or gradient:

js
MZBOT.setTheme({ bgColors: ['#1b2735', '#283e51', '#0a1622'], bgAngle: 160 }); // 3-color gradient
MZBOT.setTheme({ bgColors: ['#0d4f2b'] });                                      // single color = solid fill
MZBOT.setTheme({ bgColors: 'radial-gradient(circle at 30% 0%, #2a5298, #0a1622)' }); // raw CSS background
MZBOT.setTheme({ bgColors: 'none' });                                           // back to the theme surface
  • bgColors — an array of 1..n CSS colors (1 = solid; 2+ = linear-gradient), a comma-separated string (handy for data-mz-bg-colors), or a full CSS background string (any *-gradient(...)) used verbatim. 'none' clears it.
  • bgAngle — gradient direction in degrees (default 160). Ignored for a single color or a raw string.

The gradient replaces the surface across all themes (it's an explicit override) — pick colors that suit your palette.

Seamless image overlay (patternImage) ​

Tiles a transparent-background pattern image on top of the background. Either/or with the built-in pattern: when patternImage is set it replaces the SVG pattern (the image wins); patternImage: 'none' falls back to the SVG.

js
MZBOT.setTheme({
  patternImage:        'https://cdn.morze.tech/patterns/topography.png',
  patternImageOpacity: 0.5,    // 0..1 (the PNG's own alpha still applies)
  patternImageSize:    280,    // px tile, or any CSS background-size
});

MZBOT.setTheme({ patternImage: 'none' });   // remove the overlay
  • patternImage — a URL. Accepts http(s)://, protocol-relative (//), root/relative (/…, ./…) and data:image/…; anything else (or a URL with unsafe characters) is rejected. 'none'/'' turns it off.
  • patternImageSize — a number (px tile width, height auto) or any CSS background-size.

Via loading-script attributes ​

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>

Message animation ​

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

All theme methods are on the JavaScript API page.