Sections

Color palettes

The default set of color palettes have been selected to look great and be extremely flexible. Each theme has a set of brand-related colors that you can configure using theme settings.

Default colors

The default color palettes provide a robust set of colors for use throughout your theme, often for more subtle aspects of the theme like borders. Like everything else in our theming framework, they can be customized to perfectly reflect your company brand using the provided Sass variables.

Black and white

Black

#000

White

#fff

Translucent

rgba(255, 255, 255, .1)

Gray

Gray-100

#F7FAFC

Gray-200

#EDF2F7

Gray-300

#E2E8F0

Gray-400

#CBD5E0

Gray-500

#A0AEC0

Gray-600

#718096

Gray-700

#4A5568

Gray-800

#2D3748

Gray-900

#1A202C

Green

Green-100

#F0FFF4

Green-300

#9AE6B4

Green-500

#48BB78

Green-700

#2F855A

Green-900

#22543D

Orange

Orange-100

#FFFAF0

Orange-300

#FBD38D

Orange-500

#ED8936

Orange-700

#C05621

Orange-900

#7B341E

Red

Red-100

#FFF5F5

Red-300

#FEB2B2

Red-500

#F56565

Red-700

#C53030

Red-900

#742A2A

Theme colors

Additional theme-specific colors are available to configure through theme settings. Updates to these apply throughout the theme and can affect things like utilities. For example, if you update the Primary Color setting, using the text-primary text color utility will result in the text color of that element being set to the newly selected Primary Color.

Adding and changing colors

Sass variables

You can easily add your own custom color palettes 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 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,
);

You could then use the .text-purple-500 to change the text of an element to that shade of purple.

Theme settings

You can add your own custom theme color 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.