Skip to main content
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

PropiedadTipoDefault (light)Descripcion
primaryColorstring#2D84C7Color de acento principal.
backgroundColorstring#ffffffFondo del chat.
surfaceColorstring#f9fafbFondo de superficies (cards, header).
textColorstring#111827Color de texto principal.
textSecondarystring#6b7280Color de texto secundario.
borderColorstring#e5e7ebColor de bordes.

​
Burbujas de Mensajes

PropiedadTipoDefault (light)Descripcion
bubbleUserBgstring#2D84C7Fondo de burbujas del usuario.
bubbleUserTextstring#ffffffTexto de burbujas del usuario.
bubbleAgentBgstring#f3f4f6Fondo de burbujas del agente.
bubbleAgentTextstring#111827Texto de burbujas del agente.

​
Input y Cards

PropiedadTipoDefault (light)Descripcion
inputBgstring#ffffffFondo del input.
inputBorderstring#e5e7ebBorde del input.
cardBgstring#ffffffFondo de las cards.
cardBorderstring#e5e7ebBorde de las cards.

​
Estados

PropiedadTipoDefaultDescripcion
successColorstring#16a34aColor de estados exitosos.
errorColorstring#dc2626Color de errores.
warningColorstring#f59e0bColor de advertencias.

​
Bordes y Espaciado

PropiedadTipoDefaultDescripcion
borderRadiusstring6pxBorder radius general.
borderRadiusLgstring8pxBorder radius grande.
borderRadiusSmstring4pxBorder radius pequeno (tags, pills).
spacingstring10pxEspaciado base.
spacingSmstring6pxEspaciado pequeno.
spacingLgstring14pxEspaciado grande.

​
Tipografia

PropiedadTipoDefaultDescripcion
fontFamilystringsystem-ui, sans-serifFamilia tipografica.
fontSizestring14pxTamano de fuente base.
fontSizeSmstring12pxTamano de fuente pequeno.
fontSizeLgstring16pxTamano de fuente grande.

​
Sombras

PropiedadTipoDefaultDescripcion
shadowSmstring0 1px 2px rgba(0,0,0,0.05)Sombra pequena.
shadowMdstring0 4px 6px rgba(0,0,0,0.07)Sombra mediana.
shadowLgstring0 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>