Sections

Getting started

Branding

Customization

Enhancing content

Update theme colors

Every theme has a unique set of colors that you can configure using theme settings to instantly align the look-and-feel of your Zendesk Help Center with your company brand.

When previewing your theme in Zendesk Guide you can use the settings below to instantly update colors throughout your theme:

  • Primary color

    The color for major navigation and brand elements throughout the theme.

  • Primary text color

    The text color for hover and active element states where the primary color is used.

  • Heading color

    The color for heading elements. This includes elements that use the .h1 - .h6 classes.

  • Text color

    The color that serves as the default for all text elements throughout the theme.

  • The color for all link elements in both layouts and body content throughout the theme.

  • Border color

    The border color used throughout the theme.

  • Secondary button color

    The color used for secondary buttons with the outline style.

  • Hero heading color

    The color for headings in the hero element.

  • Hero background color (primary)

    The primary background color for hero elements.

  • Hero background color (secondary)

    The secondary background color for hero elements, which can be used to create gradient effects.

  • Hero background color opacity

    The opacity of the background color for the hero element which determines the balance between it and the underlying image.

  • Note color

    The color used for note content elements. The background color is automatically derived from this color.

  • Warning color

    The color used for warning content elements. The background color is automatically derived from this color.

  • Outline color

    The outline color used for form element and search field focus effects.

  • Background color

    The background color of each page in your Help Center.

  • Boxed background color

    The background color visible when a boxed layout is used

  • The background color applied to the page footer.

Some themes will include additional color settings like shades of the primary color, depending on their style requirements.

There are also a variety of color palettes that you can configure using Sass variables, should you need to.

Questions or feedback about this guide? Let us know