Updating 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 following settings to instantly update colors throughout your theme:

Global colors

Colors in the Colors setting group are used throughout the theme.

Name Identifier Description
Primary color color_primary The primary color used for major navigational elements and buttons
Primary text color color_primary_inverse The text color for elements where the primary color is used
Secondary color color_secondary The secondary color which can be applied to elements and patterns
Secondary text color color_secondary_inverse The text color for elements where the secondary color is used
Tertiary color color_tertiary The tertiary color which can be applied to elements and patterns
Tertiary text color color_tertiary_inverse The text color for elements where the tertiary color is used
Heading color color_heading Color for heading elements
Text color color_text Color for text elements
Link color color_link Text color for link elements
Border color color_border Border color used for general elements
Outline color color_outline Outline color for the focus state of form fields
Gray lightest color_gray_100 The lightest shade of gray
Gray light color_gray_200 The second lightest shade of gray
Gray color_gray_600 The main shade of gray
Background color bg_color The general page background color

Header colors

Colors in the Header elements setting group apply specifically to the page header.

Name Identifier Description
Header link color color_header_link Color for link elements in the standard page header
Header link color (fixed) color_header_link_fixed Color for link elements in the page header when it’s displayed above a hero element
Header background color bg_color_header Background color for the page header

General colors

Colors in the General page elements setting group apply to various elements throughout the help center.

Name Identifier Description
Notification text color color_notification The color for text within the notification configurable through theme settings
Notification background color bg_color_notification The background color for the notification configurable through theme settings
Boxed background color bg_color_boxed Background color visible when a boxed layout is used

Home page colors

Colors in the Home page elements setting group apply to various elements on the Home page. Custom blocks, content blocks, contact blocks and call-to-action elements have their own dedicated setting groups.

Name Identifier Description
Hero heading color color_hero_heading Color for headings in the hero element
Hero text color color_hero_text Color for text in the hero element
Hero background color (1) bg_color_hero Primary background color for the hero element
Hero background color (2) bg_color_hero_secondary Secondary background color for the hero element
Hero gradient bg_gradient_hero The type of background color gradient to use

Custom block colors

Colors in the Custom blocks setting group apply to the optional and configurable set of custom blocks that can be displayed on the Home page. Custom blocks present arbitrary actions that you define through theme settings in a variety of different styles.

Name Identifier Description
Custom blocks color color_custom_blocks Color palette used for custom blocks
Custom blocks background color bg_color_custom_blocks Background color for the custom blocks section

The color palette options available for custom blocks, content blocks and contact blocks reference built-in colors (“White”) and global colors defined in your theme setting (“Gray lightest”, “Gray light”, “Primary”, “Secondary” and “Tertiary”). How those colors are used depends on the style selected, which determines which template or micro-template is used.

Content block colors

Colors in the Content blocks setting group apply to the optional and configurable set of content blocks that can be displayed on the Home page. Content blocks can present categories, sections and/or articles in a variety of different styles.

Name Identifier Description
Content blocks color color_content_blocks Color palette used for content blocks
Content blocks background color bg_color_content_blocks Background color for the content blocks section

Contact block colors

Colors in the Contact blocks setting group apply to the optional and configurable set of contact blocks that can be displayed on the Home page. Content blocks can present contact options that you define through theme settings in a variety of different styles.

Name Identifier Description
Contact blocks color color_contact_blocks Color palette used for contact blocks

Call-to-action colors

Colors in the Request CTA elements setting group apply to the optional and configurable call-to-action section that can be displayed throughout the help center. The call-to-action section presents the ability to submit a request to visitors and can be presented in a number of different styles.

Name Identifier Description
CTA heading color "color_heading_cta Color for headings within the CTA
CTA text color "color_text_cta Color for text elements within the CTA
CTA background color "bg_color_cta Background color for the CTA

Article page colors

Colors in the Article page elements setting group apply to elements on the Article page.

Name Identifier Description
Note color "color_note Color for note content elements
Warning color "color_warning Color for warning content elements

Colors in the Footer elements setting group apply specifically to the page footer.

Name Identifier Description
Footer link color color_footer_link Color for link elements in the page footer
Footer background color bg_color_footer Background color for the page footer

Some themes will include additional color settings depending on their style requirements.

Adding and changing colors

Sass variables

You can add your own custom color palettes using Sass by specifying defining them in your theme’s _variables.scss file. If you specify a value for one that already exists in the framework _variables.scss file it will be overridden.

All colors defined in the $colors Sass variable are used to generate text, background and border color utilities. By default, this includes all colors except for the Heading, Text, Link and Outline theme colors.

The following example adds a purple color palette to the theme:

$colors: (
  "purple-100": #faf5ff,
  "purple-300": #d6bcfa,
  "purple-500": #9f7aea,
  "purple-700": #6b46c1,
  "purple-900": #44337a,
);

Using .text-purple-500 on an element would then change the text color of that element to that shade of purple.

Theme settings

You can add new custom theme settings to the theme’s Setting Panel by updating the manifest.json file.

Although updating colors using Sass variables or directly in the style.css file is often easier, this approach allows others to change the color in the future directly using theme settings and without the need to touch any code.

Questions or feedback about this article? Let us know