Documentation Index
Fetch the complete documentation index at: https://docs.plazbot.com/llms.txt
Use this file to discover all available pages before exploring further.
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. |
| 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>
