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 |
Footer colors
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.