Saltar al contenido principal
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.primary
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".
​
colors.light
string
El color usado para énfasis en el modo oscuro.Debe ser un código hexadecimal que comience con #.
​
colors.dark
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"
}
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.light
string
requerido
Ruta al archivo de tu logo para el modo claro. Incluye la extensión del archivo. Ejemplo: /logo/light.svg.
​
logo.dark
string
requerido
Ruta al archivo de tu logo para el modo oscuro. Incluye la extensión del archivo. Ejemplo: /logo/dark.svg.
​
logo.href
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. Ejemplo: https://yoursite.com.
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.
​
favicon.light
string
requerido
Ruta a tu favicon para el modo claro. Incluye la extensión del archivo. Ejemplo: /favicon.png.
​
favicon.dark
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.
​
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.strict
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.
​
fonts.family
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.
​
fonts.weight
number
Peso de la fuente, como 400 o 700. Las fuentes variables admiten pesos fraccionarios como 550.
​
fonts.source
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
​
fonts.format
"woff" | "woff2"
Formato del archivo de fuente. Obligatorio cuando se usa el campo source.
​
fonts.heading
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.
​
fonts.body
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.
​
icons.library
"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.
​
background.decoration
"gradient" | "grid" | "windows"
Un patrón decorativo de fondo para tu tema.
​
background.color
object
Colores de fondo personalizados para los modos claro y oscuro.
​
background.image
string or object
Imagen de fondo para tu sitio. Proporciona una única ruta o rutas separadas para los modos claro y oscuro.
docs.json
"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.latex
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.
​
styling.codeblocks
"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

​
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.background
string
Imagen de fondo para las miniaturas. Puede ser una ruta relativa o URL absoluta.
​
thumbnails.fonts
object
Configuración de tipografía para las miniaturas. Solo compatible con nombres de familia de Google Fonts.

​
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"
  }
}