> ## 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.

# Theming

> Personaliza colores, tipografia, bordes y sombras del chat.

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

```tsx theme={null}
// 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:

```tsx theme={null}
<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

```tsx theme={null}
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

```tsx theme={null}
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>
```