> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify-mintlify-8d29b8e9.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Apariencia y marca

> Configura el tema, colores, logo, favicon, tipografías y fondo en docs.json para controlar la identidad visual de tu sitio de documentación.

Usa estos ajustes de `docs.json` para controlar la identidad visual de tu sitio de documentación: tema de diseño, colores de marca, logo, tipografía y fondo.

## Ajustes

### `theme` - <Badge color="red">required</Badge>

El tema de diseño de tu sitio.

Uno de los siguientes: `mint`, `maple`, `palm`, `willow`, `linden`, `almond`, `aspen`, `sequoia`, `luma`.

Consulta [Temas](/es/customize/themes) para ver previsualizaciones y detalles.

***

### `name` - <Badge color="red">required</Badge>

**Tipo:** `string`

El nombre de tu proyecto, organización o producto. Aparece en el título de la pestaña del navegador y en otros lugares de tu sitio.

***

### `colors` - <Badge color="red">required</Badge>

**Tipo:** `object`

Los colores utilizados en tu documentación. Los colores aparecen de forma diferente según el tema. Si solo proporcionas un color primario, se aplica a todos los elementos de color.

<ResponseField name="colors.primary" type="string" required>
  El color primario de tu documentación. Generalmente se usa para énfasis en el modo claro, con algunas variaciones según el tema.

  Debe ser un código hexadecimal que comience con `#`. Ejemplo: `"#0D9373"`.
</ResponseField>

<ResponseField name="colors.light" type="string">
  El color usado para énfasis en el modo oscuro.

  Debe ser un código hexadecimal que comience con `#`.
</ResponseField>

<ResponseField name="colors.dark" type="string">
  El color utilizado para botones y estados hover tanto en el modo claro como en el modo oscuro, con algunas variaciones según el tema.

  Debe ser un código hexadecimal que comience con `#`.
</ResponseField>

```json docs.json theme={null}
"colors": {
  "primary": "#0D9373",
  "light": "#55D799",
  "dark": "#0D9373"
}
```

***

### `logo`

**Tipo:** `string` u `object`

El logo de tu sitio. Proporciona una única ruta de imagen o imágenes separadas para los modos claro y oscuro.

<ResponseField name="logo.light" type="string" required>
  Ruta al archivo de tu logo para el modo claro. Incluye la extensión del archivo. Ejemplo: `/logo/light.svg`.
</ResponseField>

<ResponseField name="logo.dark" type="string" required>
  Ruta al archivo de tu logo para el modo oscuro. Incluye la extensión del archivo. Ejemplo: `/logo/dark.svg`.
</ResponseField>

<ResponseField name="logo.href" type="string (uri)">
  La URL a la que redirigir al hacer clic en el logo. Si no se proporciona, el logo enlaza a la primera página de la configuración regional seleccionada actualmente para [documentación internacionalizada](/es/guides/internationalization), o a tu página de inicio en sitios de un solo idioma. Ejemplo: `https://yoursite.com`.
</ResponseField>

```json docs.json theme={null}
"logo": {
  "light": "/logo/light.svg",
  "dark": "/logo/dark.svg",
  "href": "https://yoursite.com"
}
```

***

### `favicon`

**Tipo:** `string` u `object`

Ruta a tu archivo de favicon, incluyendo la extensión del archivo. Se redimensiona automáticamente a los tamaños de favicon apropiados. Proporciona un único archivo o archivos separados para los modos claro y oscuro.

<ResponseField name="favicon.light" type="string" required>
  Ruta a tu favicon para el modo claro. Incluye la extensión del archivo. Ejemplo: `/favicon.png`.
</ResponseField>

<ResponseField name="favicon.dark" type="string" required>
  Ruta a tu favicon para el modo oscuro. Incluye la extensión del archivo. Ejemplo: `/favicon-dark.png`.
</ResponseField>

```json docs.json theme={null}
"favicon": "/favicon.svg"
```

***

### `appearance`

**Tipo:** `object`

Configuración del modo claro/oscuro.

<ResponseField name="appearance.default" type="&#x22;system&#x22; | &#x22;light&#x22; | &#x22;dark&#x22;">
  Modo de color predeterminado. Elige `system` para ajustarse a la configuración del sistema operativo del usuario, o `light` o `dark` para forzar un modo específico. El valor predeterminado es `system`.
</ResponseField>

<ResponseField name="appearance.strict" type="boolean">
  Cuando es `true`, oculta el selector de modo claro/oscuro para que los usuarios no puedan cambiar de modo. El valor predeterminado es `false`.
</ResponseField>

```json docs.json theme={null}
"appearance": {
  "default": "dark",
  "strict": true
}
```

***

### `fonts`

**Tipo:** `object`

Tipografías personalizadas para tu documentación. La tipografía predeterminada varía según el tema. Compatible con [Google Fonts](https://fonts.google.com) y tipografías autoalojadas.

<ResponseField name="fonts.family" type="string" required>
  Nombre de la familia tipográfica, como `"Inter"` u `"Open Sans"`. Compatible con nombres de familia de [Google Fonts](https://fonts.google.com)—estas se cargan automáticamente sin necesidad de un `source`.
</ResponseField>

<ResponseField name="fonts.weight" type="number">
  Peso de la fuente, como `400` o `700`. Las fuentes variables admiten pesos fraccionarios como `550`.
</ResponseField>

<ResponseField name="fonts.source" type="string (uri)">
  URL a una fuente alojada o ruta a un archivo de fuente local. No es necesario para Google Fonts.

  * Alojada: `https://example.com/fonts/MyFont.woff2`
  * Local: `/fonts/MyFont.woff2`
</ResponseField>

<ResponseField name="fonts.format" type="&#x22;woff&#x22; | &#x22;woff2&#x22;">
  Formato del archivo de fuente. Obligatorio cuando se usa el campo `source`.
</ResponseField>

<ResponseField name="fonts.heading" type="object">
  Sobrescribe la configuración de fuente solo para los encabezados.

  Acepta los mismos campos `family`, `weight`, `source` y `format` que el objeto `fonts` de nivel superior.
</ResponseField>

<ResponseField name="fonts.body" type="object">
  Sobrescribe la configuración de fuente solo para el texto del cuerpo.

  Acepta los mismos campos `family`, `weight`, `source` y `format` que el objeto `fonts` de nivel superior.
</ResponseField>

```json docs.json theme={null}
"fonts": {
  "family": "Inter",
  "heading": {
    "family": "Playfair Display"
  }
}
```

***

### `icons`

**Tipo:** `object`

Configuración de la biblioteca de iconos. Solo puedes usar una biblioteca de iconos por proyecto. Todos los nombres de iconos en tu documentación deben provenir de la biblioteca seleccionada.

<ResponseField name="icons.library" type="&#x22;fontawesome&#x22; | &#x22;lucide&#x22; | &#x22;tabler&#x22;" required>
  Biblioteca de iconos que se usará en toda tu documentación. El valor predeterminado es `fontawesome`.

  <Note>
    Puedes especificar una URL de un icono alojado externamente o una ruta a un archivo de icono en tu proyecto para cualquier icono individual, independientemente de la configuración de la biblioteca.
  </Note>
</ResponseField>

```json docs.json theme={null}
"icons": {
  "library": "lucide"
}
```

***

### `background`

**Tipo:** `object`

Configuración de imagen de fondo, decoración y color.

<ResponseField name="background.decoration" type="&#x22;gradient&#x22; | &#x22;grid&#x22; | &#x22;windows&#x22;">
  Un patrón decorativo de fondo para tu tema.
</ResponseField>

<ResponseField name="background.color" type="object">
  Colores de fondo personalizados para los modos claro y oscuro.

  <Expandable title="background.color">
    <ResponseField name="light" type="string">
      Color de fondo para el modo claro. Debe ser un código hexadecimal que comience con `#`.
    </ResponseField>

    <ResponseField name="dark" type="string">
      Color de fondo para el modo oscuro. Debe ser un código hexadecimal que comience con `#`.
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="background.image" type="string or object">
  Imagen de fondo para tu sitio. Proporciona una única ruta o rutas separadas para los modos claro y oscuro.

  <Expandable title="background.image">
    <ResponseField name="light" type="string" required>
      Ruta a tu imagen de fondo para el modo claro. Ejemplo: `/background.png`.
    </ResponseField>

    <ResponseField name="dark" type="string" required>
      Ruta a tu imagen de fondo para el modo oscuro. Ejemplo: `/background-dark.png`.
    </ResponseField>
  </Expandable>
</ResponseField>

```json docs.json theme={null}
"background": {
  "decoration": "gradient",
  "color": {
    "light": "#F8FAFC",
    "dark": "#0F172A"
  }
}
```

***

### `styling`

**Tipo:** `object`

Controles de estilo visual detallados.

<ResponseField name="styling.eyebrows" type="&#x22;section&#x22; | &#x22;breadcrumbs&#x22;">
  El estilo del eyebrow de la página (la etiqueta que se muestra en la parte superior de la página). Elige `section` para mostrar el nombre de la sección o `breadcrumbs` para mostrar la ruta de navegación completa. El valor predeterminado es `section`.
</ResponseField>

<ResponseField name="styling.latex" type="boolean">
  Controla si se cargan las hojas de estilo de LaTeX. De forma predeterminada, Mintlify detecta automáticamente el uso de LaTeX en tu contenido y carga las hojas de estilo necesarias.

  * Establécelo en `true` para forzar la carga de las hojas de estilo de LaTeX cuando la detección automática falle.
  * Establécelo en `false` para evitar cargar las hojas de estilo de LaTeX y mejorar el rendimiento si no usas expresiones matemáticas.
</ResponseField>

<ResponseField name="styling.codeblocks" type="&#x22;system&#x22; | &#x22;dark&#x22; | string | object">
  Tema de los bloques de código. El valor predeterminado es `"system"`.

  * `"system"`: Se ajusta al modo actual del sitio (claro u oscuro)
  * `"dark"`: Usa siempre el modo oscuro
  * Un nombre de [tema de Shiki](https://shiki.style/themes) como cadena: aplica ese tema a todos los bloques de código
  * Un objeto con claves `light` y `dark`: aplica temas de Shiki separados por modo

  <Expandable title="styling.codeblocks object">
    <ResponseField name="theme" type="string">
      Un único tema de Shiki para ambos modos.

      ```json theme={null}
      "styling": {
        "codeblocks": {
          "theme": "dracula"
        }
      }
      ```
    </ResponseField>

    <ResponseField name="theme" type="object">
      Temas de Shiki separados para los modos claro y oscuro.

      <Expandable title="theme">
        <ResponseField name="light" type="string" required>
          Nombre del tema de Shiki para el modo claro.
        </ResponseField>

        <ResponseField name="dark" type="string" required>
          Nombre del tema de Shiki para el modo oscuro.
        </ResponseField>
      </Expandable>

      ```json theme={null}
      "styling": {
        "codeblocks": {
          "theme": {
            "light": "github-light",
            "dark": "github-dark"
          }
        }
      }
      ```
    </ResponseField>

    <ResponseField name="languages" type="object">
      Configuración personalizada de lenguajes para los bloques de código.

      <Expandable title="languages">
        <ResponseField name="custom" type="array of string">
          Rutas a archivos JSON que describen lenguajes personalizados de Shiki. Usa esto para agregar resaltado de sintaxis para lenguajes que no estén en el conjunto predeterminado de Shiki. Cada archivo debe seguir el [formato de gramática de TextMate](https://macromates.com/manual/en/language_grammars).

          ```json theme={null}
          "styling": {
            "codeblocks": {
              "languages": {
                "custom": ["/languages/my-language.json"]
              }
            }
          }
          ```
        </ResponseField>
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

***

### `thumbnails`

**Tipo:** `object`

Personalización de miniaturas para redes sociales y vistas previas de página.

<ResponseField name="thumbnails.appearance" type="&#x22;light&#x22; | &#x22;dark&#x22;">
  Tema visual para las miniaturas. Si no se especifica, las miniaturas usan el esquema de color de tu sitio definido por `colors`.
</ResponseField>

<ResponseField name="thumbnails.background" type="string">
  Imagen de fondo para las miniaturas. Puede ser una ruta relativa o URL absoluta.
</ResponseField>

<ResponseField name="thumbnails.fonts" type="object">
  Configuración de tipografía para las miniaturas. Solo compatible con nombres de familia de Google Fonts.

  <Expandable title="thumbnails.fonts">
    <ResponseField name="family" type="string" required>
      Nombre de la familia tipográfica, como `"Open Sans"` o `"Playfair Display"`. Compatible con nombres de familia de [Google Fonts](https://fonts.google.com).
    </ResponseField>
  </Expandable>
</ResponseField>

## Ejemplo

```json docs.json theme={null}
{
  "$schema": "https://mintlify.com/docs.json",
  "theme": "maple",
  "name": "Example Co.",
  "colors": {
    "primary": "#3B82F6",
    "light": "#93C5FD",
    "dark": "#1D4ED8"
  },
  "logo": {
    "light": "/logo/light.svg",
    "dark": "/logo/dark.svg",
    "href": "https://example.com"
  },
  "favicon": "/favicon.svg",
  "appearance": {
    "default": "system"
  },
  "fonts": {
    "family": "Inter"
  },
  "icons": {
    "library": "lucide"
  },
  "background": {
    "decoration": "gradient"
  }
}
```