Skip to content
Mintlify
Mintlify
Configuración global

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

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

El color usado para énfasis en el modo oscuro.

Debe ser un código hexadecimal que comience con #.

colors.darkstring

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

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

logo.darkstringrequired

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

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

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

favicon.darkstringrequired

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

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

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

Peso 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.headingobject

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

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

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

Colores de fondo personalizados para los modos claro y oscuro.

Show background.color
lightstring

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

darkstring

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

background.imagestring or object

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

Show background.image
lightstringrequired

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

darkstringrequired

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.

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

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
Show styling.codeblocks object
themestring

Un único tema de Shiki para ambos modos.

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

Temas de Shiki separados para los modos claro y oscuro.

Show theme
lightstringrequired

Nombre del tema de Shiki para el modo claro.

darkstringrequired

Nombre del tema de Shiki para el modo oscuro.

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

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

Show languages
customarray 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.

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

Imagen de fondo para las miniaturas. Puede ser una ruta relativa o URL absoluta.

thumbnails.fontsobject

Configuración de tipografía para las miniaturas. Solo compatible con nombres de familia de Google Fonts.

Show thumbnails.fonts
familystringrequired

Nombre de la familia tipográfica, como "Open Sans" o "Playfair Display". 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"
  }
}
Was this page helpful?Suggest editsRaise issue