---
title: Temas
description: "Elige un tema integrado -- Jam, Nebula o Pulsar -- para controlar tipografía, diseño y modo oscuro. Personaliza colores para que coincidan con tu marca."
---

Establece `theme` en `docs.json` para controlar el diseño, la tipografía, el espaciado y el comportamiento del modo oscuro. Hay tres temas disponibles: `jam` (predeterminado), `nebula` y `pulsar`.

Las capturas de pantalla muestran la interfaz en inglés.

```json docs.json
{
  "theme": "jam"
}
```

## Temas disponibles

<Tabs>
  <Tab title="Jam" icon="jar">
    <Frame>
      <img src="/images/themes/jam-theme.webp" alt="Jam theme preview" />
    </Frame>

    El tema predeterminado. Diseño con logo en el encabezado y fondo con degradado radial derivado de tu color primario. Bordes redondeados (6-24px).

    [Ver ejemplo en vivo](https://jamdesk.com/docs/introduction)

    ```json
    {
      "theme": "jam"
    }
    ```
  </Tab>
  <Tab title="Nebula" icon="cloud">
    <Frame>
      <img src="/images/themes/nebula-theme.webp" alt="Nebula theme preview" />
    </Frame>

    Diseño con logo en el encabezado y IBM Plex Mono en todo el sitio. Fondo crema cálido (`#FEFCF9`) en modo claro. Radio de borde mínimo (2-8px).

    [Ver ejemplo en vivo](https://nebula.jamdesk.com)

    ```json
    {
      "theme": "nebula"
    }
    ```
  </Tab>
  <Tab title="Pulsar" icon="bolt">
    <Frame>
      <img src="/images/themes/pulsar-theme.webp" alt="Pulsar theme preview" />
    </Frame>

    Diseño con barra lateral primaria, logo en la barra lateral e indicadores de navegación en el borde izquierdo. Ancho completo con contenido centrado a 780px. Encabezado oculto de forma predeterminada.

    [Ver ejemplo en vivo](https://pulsar.jamdesk.com)

    ```json
    {
      "theme": "pulsar"
    }
    ```
  </Tab>
</Tabs>

## Tipografía

Cada tema incluye fuentes cargadas desde Google Fonts:

| Tema | Encabezados | Cuerpo | Código |
|-------|----------|------|------|
| [Jam](https://jamdesk.com/docs/introduction) | Inter | Inter | JetBrains Mono |
| [Nebula](https://nebula.jamdesk.com) | IBM Plex Mono | IBM Plex Mono | IBM Plex Mono |
| [Pulsar](https://pulsar.jamdesk.com) | Inter | Inter | JetBrains Mono |

La compatibilidad con fuentes personalizadas llegará próximamente. Los temas actualmente utilizan las combinaciones anteriores con fuentes del sistema como respaldo.

## Colores personalizados

Reemplaza la paleta predeterminada para que coincida con la identidad de tu marca:

```json
{
  "theme": "jam",
  "colors": {
    "primary": "#635BFF",
    "light": "#7C75FF",
    "dark": "#4F46E5"
  }
}
```

| Color | Uso |
|-------|-------|
| `primary` | Enlaces, botones, acentos |
| `light` | Estados hover, resaltados |
| `dark` | Estados activos, acentos en modo oscuro |

<Note>
Los colores se aplican después del próximo build. En desarrollo local, reinicia el servidor de desarrollo para ver los cambios.
</Note>

<Tip>
Usa una herramienta de colores como [Coolors](https://coolors.co) o [Realtime Colors](https://realtimecolors.com) para generar una paleta armoniosa.
</Tip>

## Modo oscuro

Todos los temas incluyen modo oscuro. Jamdesk sigue la preferencia del sistema del usuario y proporciona un interruptor en la barra de navegación. Tu paleta de colores se adapta automáticamente.

Para probar el modo oscuro durante el desarrollo, usa el interruptor de la barra de navegación o emúlalo en DevTools:

1. Abre DevTools
2. Presiona Cmd+Shift+P (Mac) o Ctrl+Shift+P (Windows)
3. Busca "Emulate CSS prefers-color-scheme: dark"

Para un control detallado sobre los estilos del modo oscuro, usa [CSS personalizado](/es/customization/custom-css).

## ¿Qué sigue?

<Columns cols={3}>
  <Card title="Marca" icon="palette" href="/es/customization/branding">
    Personaliza logos, colores y favicons
  </Card>
  <Card title="CSS personalizado" icon="paintbrush" href="/es/customization/custom-css">
    Reemplaza los estilos del tema con tu propio CSS
  </Card>
  <Card title="Navegación" icon="bars" href="/es/navigation/overview">
    Configura pestañas, grupos y la estructura de páginas
  </Card>
</Columns>