Themes and colors

A common use of theme variables is to change the color scheme.

Material color constants

Material color constants are generated palettes which are based on Material Design guidelines (external link). These constants use the naming pattern $mt-colorname. For example, $mt-red looks like Figure 1.

Colors within the palette can be referenced as $mt-colorname[-intensity], where:

colorname is the name of the color as defined in the material color palette.
intensity is the number for the gradient.

For example, $mt-red-100 defines a light pink.

Material color constants cannot be changed.

Color variables

Color schemes are defined using the ui-*-color and widget specific color (gbc-*Widget-*-color) variables.

ui-primary-color aims featured elements like buttons, toolbars, highlighted table rows.
ui-background-color defines the background color for your application.
ui-field-color aims form field backgrounds, including components like comboboxes, text edits, and text areas.
ui-text-icon-color defines the color for primary text and icons.
gbc-*Widget-*-color variables define colors for a specific widget or widget family. For details, go to Advanced styling

The default values of color variables can be based on the following:

The RGB (Red, Green, Blue) color model, which is used to create a wide range of colors by combining different intensities of red, green, and blue light.
Default values calculated from other ui-* color variables, such as using a formula like color.adjust($ui-primary-color, $lightness: +43%, $saturation: -10%) to modify the properties of a base color.

For example:

ui-primary-color has a default value of rgb(11,121,209). This value is equivalent to $mt-blue.
ui-primary-color-faded has a default value that is generated by adjusting the lightness and saturation of the ui-primary-color, which is the same as $mt-blue-100 if the defaults are kept.
ui-primary-color-emphasized has a default value generated by adjusting the lightness of the ui-primary-color.
ui-background-color has a default value of rgb(247,247,247).

Other variables may inherit these default values. For example, gbc-CheckBoxWidget-checked-color has a default value of ui-primary-color. See Theme variable inheritance for further details.

Tip:

The easiest way to change the look-and-feel of your interface is to change color variables. For example, to change the primary color to green, add the following line to theme.scss.json:

"ui-primary-color": "rgb(76,175,80)"

To reference a color variable in an .scss file, preface the color variable name with the dollar sign $. For example:

// in scss file
{
  color: $ui-primary-color-emphasized;
}
...