Apariencia y marca

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` - required

El tema de diseño de tu sitio. Uno de los siguientes: mint, maple, palm, willow, linden, almond, aspen, sequoia, luma. Consulta Temas para ver previsualizaciones y detalles.

`name` - required

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` - required

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.

string

requerido

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

string

El color usado para énfasis en el modo oscuro.Debe ser un código hexadecimal que comience con #.

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

docs.json

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

string

requerido

Ruta al archivo de tu logo para el modo claro. Incluye la extensión del archivo. Ejemplo: /logo/light.svg.

string

requerido

Ruta al archivo de tu logo para el modo oscuro. Incluye la extensión del archivo. Ejemplo: /logo/dark.svg.

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, o a tu página de inicio en sitios de un solo idioma. Acepta una URL absoluta, como https://yoursite.com, o una ruta relativa que comience con /, como /quickstart.

docs.json

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

string

requerido

Ruta a tu favicon para el modo claro. Incluye la extensión del archivo. Ejemplo: /favicon.png.

string

requerido

Ruta a tu favicon para el modo oscuro. Incluye la extensión del archivo. Ejemplo: /favicon-dark.png.

docs.json

"favicon": "/favicon.svg"

`appearance`

Tipo: object Configuración del modo claro/oscuro.

"system" | "light" | "dark"

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.

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.

docs.json

"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 y tipografías autoalojadas.

string

requerido

Nombre de la familia tipográfica, como "Inter" u "Open Sans". Compatible con nombres de familia de Google Fonts. Estas se cargan automáticamente sin necesidad de un source.

number

Peso de la fuente, como 400 o 700. Las fuentes variables admiten pesos fraccionarios como 550.

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

"woff" | "woff2"

Formato del archivo de fuente. Obligatorio cuando se usa el campo source.

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.

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.

docs.json

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

"fontawesome" | "lucide" | "tabler"

requerido

Biblioteca de iconos que se usará en toda tu documentación. El valor predeterminado es fontawesome.

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.

docs.json

"icons": {
  "library": "lucide"
}

`background`

Tipo: object Configuración de imagen de fondo, decoración y color.

"gradient" | "grid" | "windows"

Un patrón decorativo de fondo para tu tema.

object

Colores de fondo personalizados para los modos claro y oscuro.

Mostrar background.color

string

Color de fondo para el modo claro. Debe ser un código hexadecimal que comience con #.

string

Color de fondo para el modo oscuro. Debe ser un código hexadecimal que comience con #.

string or object

Imagen de fondo para tu sitio. Proporciona una única ruta o rutas separadas para los modos claro y oscuro.

Mostrar background.image

string

requerido

Ruta a tu imagen de fondo para el modo claro. Ejemplo: /background.png.

string

requerido

Ruta a tu imagen de fondo para el modo oscuro. Ejemplo: /background-dark.png.

docs.json

"background": {
  "decoration": "gradient",
  "color": {
    "light": "#F8FAFC",
    "dark": "#0F172A"
  }
}

`styling`

Tipo: object Controles de estilo visual detallados.

"section" | "breadcrumbs"

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.

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.

"system" | "dark" | 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 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

Mostrar styling.codeblocks object

string

Un único tema de Shiki para ambos modos.

"styling": {
  "codeblocks": {
    "theme": "dracula"
  }
}

object

Temas de Shiki separados para los modos claro y oscuro.

Mostrar theme

string

requerido

Nombre del tema de Shiki para el modo claro.

string

requerido

Nombre del tema de Shiki para el modo oscuro.

"styling": {
  "codeblocks": {
    "theme": {
      "light": "github-light",
      "dark": "github-dark"
    }
  }
}

object

Configuración personalizada de lenguajes para los bloques de código.

Mostrar languages

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.

"styling": {
  "codeblocks": {
    "languages": {
      "custom": ["/languages/my-language.json"]
    }
  }
}

`thumbnails`

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

"classic" | "headline" | "minimal"

Diseño de las miniaturas. Si no se especifica, las miniaturas usan el diseño predeterminado.

classic: logo en la esquina superior izquierda, con el título y la descripción debajo.
headline: título y descripción en la parte superior, con el logo en la esquina inferior derecha.
minimal: título y descripción centrados, con el logo en un panel en la parte inferior.

Con un preset, la etiqueta (eyebrow) sobre el título siempre usa una fuente monoespaciada, aunque configures thumbnails.fonts.

"light" | "dark"

Tema visual para las miniaturas. Si no se especifica, las miniaturas usan el esquema de color de tu sitio definido por colors.

"brand" | "neutral"

Estilo de fondo de las miniaturas con preset. Solo se aplica cuando configuras thumbnails.preset. El valor predeterminado es brand.

brand: un fondo y un resplandor teñidos con el tono de tu color primario. Si configuras background.color, las miniaturas usan ese color como fondo.
neutral: el color de fondo de tu sitio, sin resplandor.

string

Imagen de fondo para las miniaturas. Puede ser una ruta relativa o URL absoluta. En las miniaturas con preset, la imagen reemplaza el color de fondo y el resplandor de thumbnails.surface.

object

Configuración de tipografía para las miniaturas. Usa una familia de Google Fonts o un archivo de fuente autoalojado. Si la fuente no se carga, las miniaturas usan la fuente predeterminada.

Mostrar thumbnails.fonts

string

requerido

Nombre de la familia tipográfica, como "Open Sans" o "Playfair Display". Compatible con nombres de familia de Google Fonts. Si configuras source, es el nombre de tu fuente autoalojada.

string

URL o ruta a un archivo de fuente autoalojado, como /fonts/custom.woff o https://cdn.example.com/font.woff.

"woff" | "ttf" | "otf"

Formato del archivo de fuente autoalojado. Obligatorio cuando configuras source. Las miniaturas no admiten woff2.

object

La etiqueta que se muestra sobre el título de la página en las miniaturas.

Mostrar thumbnails.eyebrow

El nivel de navegación cuyo nombre aparece como etiqueta. El valor predeterminado es group. Si una página no está dentro de un elemento de navegación del tipo elegido, la etiqueta muestra el nombre del grupo. Usa none para ocultar la etiqueta.

"plain" | "bar" | "pill"

Cómo se dibuja la etiqueta en las miniaturas con preset. El valor predeterminado es bar para classic, pill para headline y plain para minimal.

string

Color hexadecimal de la etiqueta en las miniaturas con preset. Si no se especifica, Mintlify deriva el color de los colores de tu tema.

docs.json

"thumbnails": {
  "preset": "headline",
  "eyebrow": {
    "source": "tab",
    "style": "bar",
    "color": "#FDE68A"
  }
}

Sobrescribir miniaturas para una página o sección

Para cambiar la miniatura de una sola página, agrega un objeto thumbnail al frontmatter de la página. Para cambiarla en una sección de navegación, agrega thumbnail a un grupo, pestaña, ancla, menú desplegable, producto, versión, idioma o elemento de menú en docs.json. Una sobrescritura thumbnail acepta preset, appearance, surface, background y eyebrow. En una sobrescritura, eyebrow es el texto literal que se muestra sobre el título, y "" lo oculta. Configura background como "" para eliminar una imagen de fondo heredada. source, style y color de la etiqueta solo se configuran para todo el sitio en thumbnails.eyebrow. Mintlify resuelve cada clave por separado. Usa primero el frontmatter de la página, luego la sección de navegación más cercana que define la clave y luego thumbnails en docs.json. Mintlify ignora los valores de sobrescritura no válidos y usa la siguiente capa.

Page frontmatter

---
title: "Webhooks"
thumbnail:
  preset: minimal
  eyebrow: "API Reference"
---

docs.json

{
  "group": "Webhooks",
  "thumbnail": { "preset": "minimal" },
  "pages": ["guides/webhooks"]
}

Ejemplo

docs.json

{
  "$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"
  }
}

Primeros pasos

Crear contenido

Administra tu sitio

Agente

Assistant

Contenido preparado para agentes

Búsqueda y SEO

Documentar APIs

Integraciones

Referencia

Apariencia y marca

Ajustes

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Sobrescribir miniaturas para una página o sección

Ejemplo

​Ajustes

​theme - required

​name - required

​colors - required

​logo

​favicon

​appearance

​fonts

​icons

​background

​styling

​thumbnails

​Sobrescribir miniaturas para una página o sección

​Ejemplo

Ajustes

`theme` - required

`name` - required

`colors` - required

`logo`

`favicon`

`appearance`

`fonts`

`icons`

`background`

`styling`

`thumbnails`

Sobrescribir miniaturas para una página o sección

Ejemplo