Color System
To stay consistent, Yumma CSS has a set of colors ready to go right out of the box. You can customize them using the light
and dark
utility class color shades in your theme to get a specific color.
Base colors
The foundations of our color palette are defined in SCSS variables. Here’s how the colors are defined:
Color shades
To specify lighter or darker shade to a given color, you can use the l
selector to get a lighter color or d
selector to get a darker color:
Color palette
Red
Orange
Yellow
Green
Teal
Cyan
Blue
Indigo
Violet
Pink
Gray
Lead
Silver
Color utilities
Here’s a list of all the Yumma CSS color classes for customizing your theme.
Accent Color Controls form control accent color.
Background Color Controls the background color of an element.
Border Color Controls the color of the borders of an element.
Caret Color Controls the text input cursor color.
Outline Color Controls the color of the outline of an element.
Text Color Controls the text color of an element.
Text Decoration Color Controls the color of the text decoration.