Ir al contenido

Cómo personalizar la apariencia de su documentación (temas, colores y fuentes)

Puede personalizar el aspecto de su documentación publicada para alinearla con su identidad de marca. Estos ajustes se encuentran en la configuración del proyecto (Project Settings), dentro de la pestaña Publishing > Themes & Colors. Esto le permite controlar el tema, los colores, las fuentes y otros elementos estilísticos que verán sus visitantes.

Elegir un modo de tema

El ajuste Default Theme Mode determina la apariencia inicial de su documentación para los visitantes. Puede elegir un tema específico o permitir que se adapte a la configuración del sistema del usuario.

  • Auto (seguir la preferencia del sistema): Esta es la opción predeterminada. La documentación cambiará automáticamente entre los temas claro y oscuro según la preferencia del sistema operativo del visitante.
  • Light: Su documentación siempre se mostrará con el tema claro, independientemente de la configuración del sistema del usuario.
  • Dark: Su documentación siempre se mostrará con el tema oscuro.
Documentation image

Configuración del logotipo

Puede subir logotipos independientes para los temas claro y oscuro, asegurándose de que siempre sean visibles y coincidan con su imagen de marca. Si no sube un logotipo, se mostrará el texto que usted proporcione en su lugar.

  • Light Theme Logo: Suba un logotipo que se vea bien sobre fondos claros.
  • Dark Theme Logo: Suba un logotipo diseñado para fondos oscuros.
  • Light/Dark Theme Logo Text: Introduzca el nombre de su marca u otro texto para mostrarlo si el logotipo correspondiente no está disponible.
Documentation image

Personalización de colores

Defina la paleta de colores de su marca estableciendo colores primarios y secundarios tanto para el tema claro como para el oscuro. Esto garantiza una experiencia de marca coherente en los distintos modos de visualización.

  • Primary Color: Es el color de acento principal utilizado para elementos interactivos como botones, enlaces y destacados.
  • Secondary Color: Este color se utiliza para elementos de apoyo, proporcionando un contraste sutil.
Documentation image

Configuración de fuentes y estilo

Refine aún más la apariencia de su documentación seleccionando fuentes y ajustando el estilo de los bordes de los elementos de la interfaz.

  • Primary Font Family: Elija la fuente principal para todos los encabezados, el cuerpo del texto y los elementos generales de la interfaz de la lista proporcionada.
  • Monospace Font Family: Seleccione una fuente específica para bloques de código y fragmentos de código en línea.
  • Corner Style: Ajuste el radio del borde de los elementos de la interfaz. Las opciones incluyen Sharp (0px), Rounded (4px) y Extra Rounded (8px).
Documentation image

Consejos para la personalización

Recuerde guardar los cambios y hacer clic en el botón Publish Changes en la parte superior de los ajustes de publicación para que sus actualizaciones se vean reflejadas. Utilice siempre combinaciones de colores de alto contraste para mejorar la legibilidad, especialmente en el texto y los elementos interactivos.

Resumen

Este artículo detalla cómo personalizar la apariencia visual de su sitio de documentación de Hinto. Cubre la selección de un modo de tema predeterminado, la carga de logotipos personalizados para fondos claros y oscuros, la definición de colores de marca primarios y secundarios, y la elección de fuentes para crear un aspecto profesional y pulido que se alinee con su marca.

Relacionado