Color palette

You can use your own brand colors for your version of this application. We have defined a few color names based on the material design guidelines.

Primary color

When using a primary color in your palette, this color should be the most widely used across all screens and components.

Our default primary color is #29abe2.

Secondary color

Palettes with a secondary color may use this color to indicate a related action or information.

The secondary color can be a darker or lighter variation of the primary color.

Our default secondary color is #1f80aa.

Accent color

The accent should be used for promoted actions only.

Our default accent color is #ffc142.

State color

For states in forms, messages and other feedback we use state colors to indicate whether user actions were performed successfully or failed for example.

Success color
Danger color
Warning color
Info color

Usage

Background color

To apply a background color, just add the color name as a class to the element.

This is a card with a brand-primary class
This is a card with a brand-secondary class
This is a card with a brand-accent class

Text color

To apply a text color, just apply text-{color} to the text element.

This is a paragraph with a text-primary class

This is a paragraph with a text-success class

This is a paragraph with a text-warning class

This is a paragraph with a text-danger class

Customize

This theme is configured in such way you only need to change a few basic colors. These colors can be set in the theme folder. A readme file is provided there.