In this article
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
rgba(255, 255, 255, .1)
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
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:
You could then use the
.text-purple-500 to change the text of an element to that shade of purple.
You can add your own custom theme color settings to the theme’s Setting Panel by updating the
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.