How to Customize Your Documentation's Appearance (Themes, Colors, & Fonts)
You can customize the look and feel of your published documentation to align with your brand identity. These settings are found in the Project Settings under the Publishing > Themes & Colors tab. This allows you to control the theme, colors, fonts, and other stylistic elements your visitors will see.
Choosing a Theme Mode
The Default Theme Mode setting determines the initial appearance of your documentation for visitors. You can choose a specific theme or allow it to adapt to the user's system settings.
- Auto (Follow system preference): This is the default option. The documentation will automatically switch between light and dark themes based on the visitor's operating system preference.
- Light: Your documentation will always be displayed using the light theme, regardless of the user's system settings.
- Dark: Your documentation will always be displayed using the dark theme.
Logo Configuration
You can upload separate logos for both light and dark themes to ensure they are always visible and match your branding. If a logo is not uploaded, the text you provide will be displayed instead.
- Light Theme Logo: Upload a logo that is best viewed on light backgrounds.
- Dark Theme Logo: Upload a logo designed for dark backgrounds.
- Light/Dark Theme Logo Text: Enter your brand name or other text to display if the corresponding logo is unavailable.
Customizing Colors
Define your brand's color palette by setting primary and secondary colors for both light and dark themes. This ensures a consistent brand experience across different viewing modes.
- Primary Color: This is the main accent color used for interactive elements like buttons, links, and highlights.
- Secondary Color: This color is used for supporting elements, providing a subtle contrast.
Font and Style Settings
Further refine your documentation's appearance by selecting fonts and adjusting the corner style of UI elements.
- Primary Font Family: Choose the main font for all headings, body text, and general UI elements from the provided list.
- Monospace Font Family: Select a font specifically for code blocks and inline code snippets.
- Corner Style: Adjust the border radius for UI elements. Options include Sharp (0px), Rounded (4px), and Extra Rounded (8px).
Tips for Customization
Remember to save your changes and then click the Publish Changes button at the top of the publishing settings to make your updates live. Always use high-contrast color combinations for better readability, especially for text and interactive elements.
Summary
This article details how to customize the visual appearance of your published Hinto documentation site. It covers selecting a default theme mode, uploading custom logos for light and dark backgrounds, defining primary and secondary brand colors, and choosing fonts to create a polished, professional look that aligns with your brand.