Skip to content

Colors

By playing around with the color parameters exposed here, you are can create a global palette applied consistently to the User Interface as a whole.

Color Parameters

Color parameters are displayed side by side. Their names are self-descriptive (well, almost...) and you will instantly understand how they are applied to the Theme in case you have been exposed to any Theming UI Framework (e.g. Bootstrap).

Here is a description for most of the parameters:

Name Description
Background The background color of the pages
Containers The background color of the containers (panels, modals, tabs etc.)
Borders The color of the borders
Font The standard font color
Default The color for the elements of Default color role
Default Hover The color, on hover, for the elements of Default color role
Default Contrast The color that contrasts with the main color of the elements of Default color role
Primary The color for the elements of Primary color role
Primary Hover The color, on hover, for the elements of Primary color role
Primary Contrast The color that contrasts with the main color of the elements of Primary color role
Success The color for the elements of Success color role
Success Hover The color, on hover, for the elements of Success color role
Success Contrast The color that contrasts with the main color of the elements of Success color role
Info The color for the elements of Info color role
Info Hover The color, on hover, for the elements of Info color role
Info Contrast The color that contrasts with the main color of the elements of Info color role
Warning The color for the elements of Warning color role
Warning Hover The color, on hover, for the elements of Warning color role
Warning Contrast The color that contrasts with the main color of the elements of Warning color role
Danger The color for the elements of Danger color role
Danger Hover The color, on hover, for the elements of Danger color role
Danger Contrast The color that contrasts with the main color of the elements of Danger color role
Input The color used for the text of the various input controls
Input Background The color used for the background of the various input controls
Input Border The color used for the borders of the various input controls
Footers Background The background color used for the footers of the various table-like controls
Footers The text color used for the footers of the various table-like controls
Rows Background The background color used for the rows of the various table-like controls
Rows The text color used for the rows of the various table-like controls
Rows Alternative Background The background color used for the alternative rows of the various table-like controls
Rows Alternative The text color used for the alternative rows of the various table-like
Rows Hover Background The background color used for the rows, on hover, of the various table-like controls
Rows Hover The text color used for the rows, on hover of the various table-like controls
Header Background The background color used for the headers of the various table-like controls
Header The text color used for the headers of the various table-like controls

Adjusting a color variable

Color parameter parts

  1. A rectangle filled with the actual selected color
  2. An input box for the color code
  3. Its name
  4. The LESS variable name that corresponds to this color parameter (e.g. color-primary)

Note

The LESS variable name is hidden when Theme Editor is in Simple Mode

Changing the color

  • Directly type a value to the input box. Values can be in hex, rgb or rgba format
  • Click on the rectangle, select the desired color using the color picker and click the choose button