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 - 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.
colors.primarystringrequiredEl 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".
colors.lightstringEl color usado para énfasis en el modo oscuro.
Debe ser un código hexadecimal que comience con #.
colors.darkstringEl 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 #.
"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.
logo.lightstringrequiredRuta al archivo de tu logo para el modo claro. Incluye la extensión del archivo. Ejemplo: /logo/light.svg.
logo.darkstringrequiredRuta al archivo de tu logo para el modo oscuro. Incluye la extensión del archivo. Ejemplo: /logo/dark.svg.
logo.hrefstring (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. Ejemplo: https://yoursite.com.
"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.
favicon.lightstringrequiredRuta a tu favicon para el modo claro. Incluye la extensión del archivo. Ejemplo: /favicon.png.
favicon.darkstringrequiredRuta a tu favicon para el modo oscuro. Incluye la extensión del archivo. Ejemplo: /favicon-dark.png.
"favicon": "/favicon.svg"appearance
Tipo: object
Configuración del modo claro/oscuro.
appearance.default"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.
appearance.strictbooleanCuando es true, oculta el selector de modo claro/oscuro para que los usuarios no puedan cambiar de modo. El valor predeterminado es false.
"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.
fonts.familystringrequiredNombre 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.
fonts.weightnumberPeso de la fuente, como 400 o 700. Las fuentes variables admiten pesos fraccionarios como 550.
fonts.sourcestring (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
fonts.format"woff" | "woff2"Formato del archivo de fuente. Obligatorio cuando se usa el campo source.
fonts.headingobjectSobrescribe 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.
fonts.bodyobjectSobrescribe 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.
"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.
icons.library"fontawesome" | "lucide" | "tabler"requiredBiblioteca 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.
"icons": {
"library": "lucide"
}background
Tipo: object
Configuración de imagen de fondo, decoración y color.
background.decoration"gradient" | "grid" | "windows"Un patrón decorativo de fondo para tu tema.
background.colorobjectColores de fondo personalizados para los modos claro y oscuro.
Show Hide background.color
lightstringColor de fondo para el modo claro. Debe ser un código hexadecimal que comience con #.
darkstringColor de fondo para el modo oscuro. Debe ser un código hexadecimal que comience con #.
background.imagestring or objectImagen de fondo para tu sitio. Proporciona una única ruta o rutas separadas para los modos claro y oscuro.
Show Hide background.image
lightstringrequiredRuta a tu imagen de fondo para el modo claro. Ejemplo: /background.png.
darkstringrequiredRuta a tu imagen de fondo para el modo oscuro. Ejemplo: /background-dark.png.
"background": {
"decoration": "gradient",
"color": {
"light": "#F8FAFC",
"dark": "#0F172A"
}
}styling
Tipo: object
Controles de estilo visual detallados.
styling.eyebrows"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.
styling.latexbooleanControla 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
truepara forzar la carga de las hojas de estilo de LaTeX cuando la detección automática falle. - Establécelo en
falsepara evitar cargar las hojas de estilo de LaTeX y mejorar el rendimiento si no usas expresiones matemáticas.
styling.codeblocks"system" | "dark" | string | objectTema 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
lightydark: aplica temas de Shiki separados por modo
Show Hide styling.codeblocks object
themestringUn único tema de Shiki para ambos modos.
"styling": {
"codeblocks": {
"theme": "dracula"
}
}themeobjectTemas de Shiki separados para los modos claro y oscuro.
Show Hide theme
lightstringrequiredNombre del tema de Shiki para el modo claro.
darkstringrequiredNombre del tema de Shiki para el modo oscuro.
"styling": {
"codeblocks": {
"theme": {
"light": "github-light",
"dark": "github-dark"
}
}
}languagesobjectConfiguración personalizada de lenguajes para los bloques de código.
Show Hide languages
customarray of stringRutas 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.
thumbnails.appearance"light" | "dark"Tema visual para las miniaturas. Si no se especifica, las miniaturas usan el esquema de color de tu sitio definido por colors.
thumbnails.backgroundstringImagen de fondo para las miniaturas. Puede ser una ruta relativa o URL absoluta.
thumbnails.fontsobjectConfiguración de tipografía para las miniaturas. Solo compatible con nombres de familia de Google Fonts.
Show Hide thumbnails.fonts
familystringrequiredNombre de la familia tipográfica, como "Open Sans" o "Playfair Display". Compatible con nombres de familia de Google Fonts.
Ejemplo
{
"$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"
}
}