Colors

Standard colours and status-dependent colours for the background, text and other components of a control.

The colours used in a control element are already preset for all control elements so that a uniform colour design is guaranteed across the entire application. In addition, the preset colours can be switched at the touch of a button depending on the selected theme. However, if other colours are to be used in the control element, these can be defined individually for the control element using the properties in the "Colors" category.

The "Colors" category contains a whole range of properties that are not listed and explained individually here. The meaning of the respective property can be deduced from the name of the property if the meanings of the most important properties for colours are known.

These are the most important properties:

BackgroundColor

Defines the colour for the background.

BorderColor

Defines the colour for the frame.

ForegroundColor

Defines the colour for the text, the icons (see chapter Graphics) or the label.

Colors for a state

To visualise a particular state of the control, e.g. when the control has been activated by the user and is on ("Checked" state), colours can be defined via corresponding properties. The properties that define the colours for the possible states of the control contain the name of the state in the property name.

Example: CheckedBackgroundColor

Defines the colour for the background of the toggle button when it is in the "Checked" state, i.e. on.

Colors for a sub-element

Properties that define the colour for a sub-element of the control contain the name of this sub-element in the property name.

Example: In the DropDownBox control element, for example, the "InputForegroundColor" property is available, which defines the text colour for the Input sub-element.

Example: The "UnderlineColor" property defines the colour for the underline that is available in the NumericVarIn and TextVarIn controls in the "Plain.Default" style.

More colours

Other colours that are available in some control elements are

CaretColor

Defines the colour for the cursor of the input control element.

ErrorColor

Defines the colour that is used in the control element for the error text, the error symbol and the frame of the input field in the event of an error, e.g. if the limit value is exceeded.

FillColor

Defines the colour for a list element (StateIndicatorItem) in a StateIndicator, a value range (ColorIndicatorLimit) in a ColorIndicator, a segment (PieSegment, StackedDonutGaugeSegment) in a PieChart or in a StackedDonutGauge.

Color categories

The following types of colours are available in each property in the "Colors" category:

Theme

Theme colours are keywords that contain a different colour depending on the theme. The @ sign in front of the keyword indicates that it is a theme colour. By default, all controls contain theme colours.

Custom

User-defined list of colours. These colours are not theme-dependent. The colour values are defined in the customcolors.json file in the resourcesWcolors folder.

ColorPalette

Extensive colour palette for web. These colours are not theme-dependent. The colour values are defined in the file colorpalette.json in the resourcesWcolors folder.