BackgroundColor property

Screen.BackgroundColor — Color

The background color, which is used to paint the areas behind items such as fields, buttons and navigators. Another distinct color, the backdrop color, may be used to paint the app background, which is set at a plane below the backgrounds for fields, buttons and navigators.

The background color is a base color, which other colors may copy or remix. If not set, it inherits the background color from the preceding screen. If there is no color to inherit, a default color is used, set through the color theme chosen for the app.

You can completely change the color appearance of an app just by setting the primary color, the accent color and the background color. All other colors, if not set explicitly, are based on these base colors. The light foreground color, the dark foreground color and the warning color are also base colors, but rarely need to be changed.

Consult our reference material on colors to learn more.

Examples

IF(Field1 < 3, Color.Red)IF(Field1 < 3; Color,Red)

Sets the background color to red only if Field1.ValueField1,Value is less than 3.

IF(OR(ISBLANK(Field1:Field50)), Color.Red)IF(OR(ISBLANK(Field1:Field50)); Color,Red)

Sets the background color to red only if a single field of the Field1:Field50Field1:Field50 range is blank (as determined by the ISBLANK function). This range includes the two fields Field1 and Field50 and all fields that appear between them.

The formula ISBLANK(Field1:Field50)ISBLANK(Field1:Field50) returns a logical array with the same number of elements as there are fields in the Field1:Field50Field1:Field50 range, like this array: { TRUE, FALSE, TRUE, TRUE, ...}{ TRUE; FALSE; TRUE; TRUE; ...}. The OR function returns TRUE if one or more elements of the array are TRUE. Finally, this value is used as the condition to the IF function (its first parameter), which selects a red color only if the condition is TRUE.

IF(!AND((Field1:Field50).Valid), Color.Red)IF(!AND((Field1:Field50),Valid); Color,Red)

Sets the background color to red only if a single field of the Field1:Field50Field1:Field50 range is invalid (as determined by the Valid property of the fields). This range includes the two fields Field1 and Field50 and all fields that appear between them.

The formula (Field1:Field50).Valid(Field1:Field50),Valid returns a logical array with the same number of elements as there are fields in the Field1:Field50Field1:Field50 range, like this array: { TRUE, FALSE, TRUE, TRUE, ...}{ TRUE; FALSE; TRUE; TRUE; ...}. The AND function returns TRUE only if all elements of the array are TRUE.

Finally, the ! operator negates the returned logical value from AND, thereby turning FALSE into TRUE and TRUE into FALSE. This value is used as the condition to the IF function (its first parameter), which selects a red color only if the condition is TRUE.

IF(!Field1.Valid, Color.Red)IF(!Field1,Valid; Color,Red)

Sets the background color to red only if Field1 is invalid (that is, if the Valid property of Field1 returns FALSE). If this screen is the first screen of the app, this background color is used for all screens, unless a screen specifies its own background color. Otherwise, it is only used for this screen and the screens that follow it. If Field1 is valid, the background color is inherited from the preceding screen. If there is no color to inherit, a default color, set through the chosen color theme, is used.

IF(!Field1.Valid, Color.Red, BLANK())IF(!Field1,Valid; Color,Red; BLANK())

Sets the background color to red only if Field1 is invalid. If Field1 is valid, the background color is inherited from the preceding screen. If there is no color to inherit, a default color, set through the chosen color theme, is used. Providing the third parameter explicitly as BLANK()BLANK() and leaving it out have the same effect.

IF(!Field1.Valid, Color.Red, DEFAULTCOLOR())IF(!Field1,Valid; Color,Red; DEFAULTCOLOR())

Sets the background color to red only if Field1 is invalid. If Field1 is valid, a default color, set through the chosen color theme, is used. As DEFAULTCOLOR()DEFAULTCOLOR() is provided as the third parameter, no attempt to inherit a color from the preceding screen is made.

IF(!Field1.Valid, COLOR("red"))IF(!Field1,Valid; COLOR("red"))

Sets the background color to red only if Field1 is invalid. The COLOR function can return the same colors as those that can be accessed by writing Color.Color,, followed by the color name. However, any typos in the text string given to COLOR are only flagged as erroneous once your app is run, as opposed to writing Color.Color,, followed by the color name, in which case error are flagged immediately.

IF(!Field1.Valid, COLOR("#f00"))IF(!Field1,Valid; COLOR("#f00"))

Sets the background color to red only if Field1 is invalid. The COLOR function recognizes a variety of formats, including the hex notation also used with CSS (Cascading Style Sheets).

IF(TextDropDownField1.Index = 1, Color.Red, TextDropDownField1.Index = 2, Color.Yellow)IF(TextDropDownField1,Index = 1; Color,Red; TextDropDownField1,Index = 2; Color,Yellow)

Sets the background color to red if the first item of the TextDropDownField1 field is selected and to yellow if the second item is selected. If any other item is selected, IF returns a blank value, meaning that the default behavior is used. In other words, if any other item is selected, the screen inherits the background color from the screen preceding it. If there is no color to inherit, a default color is used, taken from the color theme chosen for the app.

SWITCH(TextDropDownField1.Index, 1, Color.Red, 2, Color.Yellow)SWITCH(TextDropDownField1,Index; 1; Color,Red; 2; Color,Yellow)

Sets the background color to red if the first item of the TextDropDownField1 field is selected and to yellow if the second item is selected. SWITCH provides a compact alternative to IF when all conditions test for equality.

CHOOSE(TextDropDownField1.Index, Color.Red, Color.Yellow)CHOOSE(TextDropDownField1,Index; Color,Red; Color,Yellow)

Sets the background color to red if the first item of the TextDropDownField1 field is selected and to yellow if the second item is selected. CHOOSE provides a compact alternative to IF and SWITCH when all conditions test for equality with numbers starting with 1, where each subsequent number is incremented by 1 (1, 2, 3, ...).

HSL((1 - (MIN(50, MAX(10, Field1)) - 10) / (50 - 10)) * 210, 60, 60)HSL((1 - (MIN(50; MAX(10; Field1)) - 10) / (50 - 10)) * 210; 60; 60)

Sets the background color to blue if the value of Field1 is 10 or below and to red if the same value is 50 or above. For values that are between 10 and 50, the color is set to cyan (at roughly 20), green (at roughly 30) and yellow (at roughly 40). All other values of Field1 correspond to distinct color values.

MIN(50, MAX(10, Field1))MIN(50; MAX(10; Field1)) first ensures that the value is between 10 and 50. To produce a ratio between 0 and 1, 10 is subtracted from the number before it is divided by 50 - 1050 - 10, 40: As such, values at 10 or below correspond to 0 and values at 50 or above correspond to 1.

To achieve our color goals (where blue should correspond to a ratio of 0 and red should correspond to a ratio of 1), this number is inverted by subtracting it from 1.

The HSL function is used to produce the resulting color. Its second and third parameters represent the saturation and lightness of the resulting color and range from 0 to 100. In this formula, they have both been set to 60. The first parameter represents the hue and range from 0 to 360 (where 0 and 360 both represent a blue hue). To produce this first parameter, the calculated ratio is multiplied by 210 (which corresponds to red).

For an expanded discussion on this formula, refer to our sample app.