Ir para o conteúdo

Como personalizar a aparência da sua documentação (Temas, Cores e Fontes)

Você pode personalizar o visual da sua documentação publicada para alinhá-la à identidade da sua marca. Essas configurações estão localizadas em Configurações do Projeto, na aba Publicação > Temas e Cores. Isso permite que você controle o tema, as cores, as fontes e outros elementos estilísticos que seus visitantes verão.

Escolhendo um modo de tema

A configuração Modo de Tema Padrão determina a aparência inicial da sua documentação para os visitantes. Você pode escolher um tema específico ou permitir que ele se adapte às configurações do sistema do usuário.

  • Automático (Seguir preferência do sistema): Esta é a opção padrão. A documentação alternará automaticamente entre os temas claro e escuro com base na preferência do sistema operacional do visitante.
  • Claro: Sua documentação será sempre exibida usando o tema claro, independentemente das configurações de sistema do usuário.
  • Escuro: Sua documentação será sempre exibida usando o tema escuro.
Documentation image

Configuração de logotipo

Você pode fazer o upload de logotipos separados para os temas claro e escuro para garantir que eles estejam sempre visíveis e combinem com sua marca. Se um logotipo não for enviado, o texto fornecido será exibido em seu lugar.

  • Logotipo do Tema Claro: Faça o upload de um logotipo com melhor visualização em fundos claros.
  • Logotipo do Tema Escuro: Faça o upload de um logotipo projetado para fundos escuros.
  • Texto do Logotipo (Tema Claro/Escuro): Insira o nome da sua marca ou outro texto para exibir caso o logotipo correspondente não esteja disponível.
Documentation image

Personalizando cores

Defina a paleta de cores da sua marca configurando as cores primária e secundária para os temas claro e escuro. Isso garante uma experiência de marca consistente em diferentes modos de visualização.

  • Cor Primária: É a cor de destaque principal usada para elementos interativos, como botões, links e realces.
  • Cor Secundária: Esta cor é usada para elementos de suporte, proporcionando um contraste sutil.
Documentation image

Configurações de fonte e estilo

Refine ainda mais a aparência da sua documentação selecionando fontes e ajustando o estilo de arredondamento dos elementos da interface.

  • Família de Fontes Primária: Escolha a fonte principal para todos os títulos, corpo do texto e elementos gerais da interface a partir da lista fornecida.
  • Família de Fontes Monoespaçada: Selecione uma fonte especificamente para blocos de código e trechos de código em linha.
  • Estilo de Canto: Ajuste o raio da borda para elementos da interface. As opções incluem Reto (0px), Arredondado (4px) e Muito Arredondado (8px).
Documentation image

Dicas para personalização

Lembre-se de salvar suas alterações e, em seguida, clicar no botão Publicar Alterações na parte superior das configurações de publicação para que suas atualizações entrem em vigor. Sempre use combinações de cores de alto contraste para melhorar a legibilidade, especialmente para textos e elementos interativos.

Resumo

Este artigo detalha como personalizar a aparência visual do seu site de documentação Hinto publicado. Ele aborda a seleção de um modo de tema padrão, o upload de logotipos personalizados para fundos claros e escuros, a definição de cores primárias e secundárias da marca e a escolha de fontes para criar um visual profissional e polido que se alinhe à sua marca.

Relacionado