Colors

Color palettes

The default color palettes provide a robust set of colors for use throughout your theme. Like everything else in our theming framework, they can be customized to perfectly reflect your company brand.

Black and white

Gray

Green

Orange

Red

Theme

In addition to the default color palettes, every theme has a unique set of theme colors, including:

• Primary color: the color for major navigational elements.
• 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.
• Text color: the color for text elements.
• Link color: the color for link elements.
• Outline color: the outline color for form elements and search fields.
• Background color: the background color of your Help Center.

Adding and changing colors

You can easily add your own custom color palettes by specifying defining them in your theme’s _variables.scss file. All colors defined in the $colors Sass map 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,
);

Any color values that are already defined as defaults by the framework will be overridden.