Colors

In the following we show several global modifiers that change the color of an element.

ATTENTION We have only implemented the default colors as modifiers, but not their shades (darker, dark, light, lighter, & contrasts).

Background Colors

To color the background of an element, add the global .background-color-{COLOR_NAME} class modifier. You can use all default colors from the Color Palette.

Theme basic Screen size XL

html

Background Classes

The class colors change depending on the current theme.

Theme basic Screen size XL

html

Border Colors

To color the border of an element, add the global .border-color-{COLOR_NAME} class modifier. You can use all default colors from the Color Palette.

Theme basic Screen size XL

html

Border Classes

The class colors change depending on the current theme.

Theme basic Screen size XL

html

Font Colors

To color the font of an element, add the global .font-color-{COLOR_NAME} class modifier. You can use all default colors from the Color Palette.

Theme basic Screen size XL

html

Font Classes

The class colors change depending on the current theme.

Theme basic Screen size XL

html