Theme docs
Overview
Customize the visual theme of your DocsHound documentation to ensure it aligns with your brand. Explore various options for adjusting the appearance, including uploading a logo, selecting fonts, and choosing colors.
Branded Docs
Start by navigating to the Theme tab of the Publish modal, accessed by clicking the Publish icon in the top corner of the editor.
Product Logo
To customize the visual theme of your DocsHound documentation, you can upload a product logo. You will find the Product logo section at the top left of the screen.
Next to the DocsHound logo, there is an option to upload an image. The optimal size for the logo is 576px by 128px. To upload your product logo, click on the upload option, select the desired image from your device, and confirm your choice. Your new logo will be displayed in the documentation once you publish your guide.
Guide Label
The guide label toggle switch is a feature in the Theme tab of the Publish DocsHound Docs interface. This switch allows you to control the display of a label next to your product logo in your documentation.
A guide label is a piece of text that appears next to your logo, usually indicating the name or type of the guide. It helps users identify the purpose or category of the documentation quickly.
When you toggle the guide label on, it appears next to your logo, giving your documentation a more informative and branded look. If you toggle it off, the label disappears, resulting in a cleaner and more minimalistic visual design.
Font Selection
To find the font dropdown menu, navigate to the Theme tab. The Font section will be visible, with a dropdown menu that allows you to select from various font options. The default font currently set is Inter.
To select a font, click on the dropdown menu in the Font section. A list of available fonts will appear. Scroll through the list and click on your preferred font option. The selected font will then be applied to your documentation.
Brand Colors
To select colors, simply click on the color picker tool next to either the table of contents or accent options. A palette will appear, providing a range of colors to choose from. You can also input specific color codes if you have a particular shade in mind.
The colors you select for the table of contents and accent areas will significantly influence the overall look and feel of your documentation. By coordinating these colors with your brand's palette, you can create a cohesive and professional appearance.
Display Mode
DocsHound offers three display mode options for your documentation: Light, Dark, and System. These modes affect the visual appearance of your documentation, allowing you to tailor it to different lighting environments and user preferences.
To select a display mode, navigate to the Theme tab within the Publish DocsHound Docs interface. Here, you'll find the Display mode section. Choose from the available options by clicking on the corresponding button: Light, Dark, or System.
The Light mode features a bright background with dark text, providing high contrast and readability in well-lit environments. This mode is beneficial for users working in bright spaces.
The Dark mode, on the other hand, presents a dark background with light text, reducing eye strain in low-light conditions. This mode is ideal for users operating in darker settings or at night.
Lastly, the System mode adjusts the display based on your device's settings. If your device is set to use a dark or light theme, the documentation will match that setting. This mode offers a seamless experience by aligning with the user's preferred system settings.
Preview Changes
Before finalizing your documentation, it's important to preview it. The Publish guide button, located at the bottom of the DocsHound interface, allows you to open a preview version of your documentation portal.
Previewing is essential because it helps you see how your documentation will look to users. This step ensures that the visual elements, like the product logo, font, brand colors, and display mode, appear as you intended.
Using the preview feature allows you to make any necessary adjustments before making the documentation live. This way, you can ensure that everything is correctly aligned and visually appealing.
Preview Changes First!
Always preview your changes before publishing. This ensures the final look of your documentation meets your expectations.
Frequently Asked Questions
You can change the logo size by uploading an image with the optimal dimensions of 576px x 128px in the Product logo section of the Theme tab.
To toggle the guide label, use the switch in the Guide label section of the Theme tab of the Publish modal.
Select a custom font by using the dropdown menu in the Font section of the Theme tab of the Publish modal.