Petal offers shades of the 3 colors from the Shakr color scheme as globally usable LESS variables:
-l2 for lighter shades,
-d2 for darker shades.
There are also some preset classes where you can quickly add text and background color properties.
To add custom colors, add them as variables at the bottom of
color-palette.less file and you'll be able to use them for customizing your own build of Petal.
// user added custom colors @purple: #c37dc4; @orange: #f1a85b; @teal: #21c5c7;
Many parts of Petal refer to the
@primary-accent-color variable to use as the base color of things. By default the primary accent color is set to
@blue, which means buttons, form input borders, checkboxes will all use the blue color as the common color.
After adding your own color to the
color-palette.less change the value of
@primary-accent-color to your desired color to apply the main color change to all elements.