Theming

El SDK React soporta temas predefinidos (light, dark) y temas personalizados parciales. Pasa el tema al <PlazbotProvider> y todos los componentes hijos lo heredan automaticamente.

Temas Predefinidos

// Tema claro (default)
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme="light">

// Tema oscuro
<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme="dark">

Tema Personalizado

Pasa un objeto parcial de PlazbotTheme. Solo necesitas definir las propiedades que quieres cambiar:

<PlazbotProvider
  sdk={sdk}
  agentId="ag_xxxx"
  theme={{
    primaryColor: '#7c3aed',
    backgroundColor: '#faf5ff',
    surfaceColor: '#f3e8ff',
    textColor: '#1e1b4b',
    bubbleUserBg: '#7c3aed',
    bubbleUserText: '#ffffff',
    bubbleAgentBg: '#ede9fe',
    bubbleAgentText: '#1e1b4b',
    borderRadius: '8px',
    fontFamily: '"Inter", sans-serif',
  }}
>
  <Chat />
</PlazbotProvider>

Propiedades del Tema

Colores Principales

Propiedad	Tipo	Default (light)	Descripcion
`primaryColor`	`string`	`#2D84C7`	Color de acento principal.
`backgroundColor`	`string`	`#ffffff`	Fondo del chat.
`surfaceColor`	`string`	`#f9fafb`	Fondo de superficies (cards, header).
`textColor`	`string`	`#111827`	Color de texto principal.
`textSecondary`	`string`	`#6b7280`	Color de texto secundario.
`borderColor`	`string`	`#e5e7eb`	Color de bordes.

Burbujas de Mensajes

Propiedad	Tipo	Default (light)	Descripcion
`bubbleUserBg`	`string`	`#2D84C7`	Fondo de burbujas del usuario.
`bubbleUserText`	`string`	`#ffffff`	Texto de burbujas del usuario.
`bubbleAgentBg`	`string`	`#f3f4f6`	Fondo de burbujas del agente.
`bubbleAgentText`	`string`	`#111827`	Texto de burbujas del agente.

Input y Cards

Propiedad	Tipo	Default (light)	Descripcion
`inputBg`	`string`	`#ffffff`	Fondo del input.
`inputBorder`	`string`	`#e5e7eb`	Borde del input.
`cardBg`	`string`	`#ffffff`	Fondo de las cards.
`cardBorder`	`string`	`#e5e7eb`	Borde de las cards.

Estados

Propiedad	Tipo	Default	Descripcion
`successColor`	`string`	`#16a34a`	Color de estados exitosos.
`errorColor`	`string`	`#dc2626`	Color de errores.
`warningColor`	`string`	`#f59e0b`	Color de advertencias.

Bordes y Espaciado

Propiedad	Tipo	Default	Descripcion
`borderRadius`	`string`	`6px`	Border radius general.
`borderRadiusLg`	`string`	`8px`	Border radius grande.
`borderRadiusSm`	`string`	`4px`	Border radius pequeno (tags, pills).
`spacing`	`string`	`10px`	Espaciado base.
`spacingSm`	`string`	`6px`	Espaciado pequeno.
`spacingLg`	`string`	`14px`	Espaciado grande.

Tipografia

Propiedad	Tipo	Default	Descripcion
`fontFamily`	`string`	`system-ui, sans-serif`	Familia tipografica.
`fontSize`	`string`	`14px`	Tamano de fuente base.
`fontSizeSm`	`string`	`12px`	Tamano de fuente pequeno.
`fontSizeLg`	`string`	`16px`	Tamano de fuente grande.

Sombras

Propiedad	Tipo	Default	Descripcion
`shadowSm`	`string`	`0 1px 2px rgba(0,0,0,0.05)`	Sombra pequena.
`shadowMd`	`string`	`0 4px 6px rgba(0,0,0,0.07)`	Sombra mediana.
`shadowLg`	`string`	`0 10px 15px rgba(0,0,0,0.1)`	Sombra grande.

Ejemplo: Tema Oscuro Custom

const darkCustom = {
  primaryColor: '#38bdf8',
  backgroundColor: '#0f172a',
  surfaceColor: '#1e293b',
  textColor: '#f1f5f9',
  textSecondary: '#94a3b8',
  borderColor: '#334155',
  bubbleUserBg: '#0ea5e9',
  bubbleUserText: '#ffffff',
  bubbleAgentBg: '#1e293b',
  bubbleAgentText: '#f1f5f9',
  cardBg: '#1e293b',
  cardBorder: '#334155',
}

<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme={darkCustom}>
  <Chat />
</PlazbotProvider>

Ejemplo: Tema de Marca

const brandTheme = {
  primaryColor: '#059669',
  bubbleUserBg: '#059669',
  bubbleUserText: '#ffffff',
  borderRadius: '12px',
  fontFamily: '"Poppins", sans-serif',
}

<PlazbotProvider sdk={sdk} agentId="ag_xxxx" theme={brandTheme}>
  <ChatWidget buttonColor="#059669" />
</PlazbotProvider>

SDK Plazbot

Módulos

React

Temas Predefinidos

Tema Personalizado

Propiedades del Tema

Colores Principales

Burbujas de Mensajes

Input y Cards

Estados

Bordes y Espaciado

Tipografia

Sombras

Ejemplo: Tema Oscuro Custom

Ejemplo: Tema de Marca

​Temas Predefinidos

​Tema Personalizado

​Propiedades del Tema

​Colores Principales

​Burbujas de Mensajes

​Input y Cards

​Estados

​Bordes y Espaciado

​Tipografia

​Sombras

​Ejemplo: Tema Oscuro Custom

​Ejemplo: Tema de Marca

Temas Predefinidos

Tema Personalizado

Propiedades del Tema

Colores Principales

Burbujas de Mensajes

Input y Cards

Estados

Bordes y Espaciado

Tipografia

Sombras

Ejemplo: Tema Oscuro Custom

Ejemplo: Tema de Marca