Skip to content
Color theme considerations › Configure theming › Next Experience theming › Configuring the Mobile Platform › Mobile Platform
Release: Australia · Updated: 2026-03-12 · Official documentation · View source

Color variable support for UI rules

Learn how to use color variables to change theming in your mobile UI rules.

Use the following color variables in the Value field of your UI rules with the Operation field set to Set UI Style

  • BackgroundColorVariable
  • FontColorVariable outside or within the TextDecorator

You can define any color variable from the UX Theme Properties [sys_ux_theme_property] table. For a list available variables see the color design guide below. For example:

{“BackgroundColorVariable”: “--now-color-secondary-3", “BackgroundColor”: “#3f2c11”}

For details on creating these UI rule actions, see Create a mobile UI rule action.

Image omitted: color-var-example-1.png
Color variable used in a ui action

Mobile UI rule color guide

Color variables are divided into Use the design guideline to identify the right color variable for your use case.

  • Alert color palette

    Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.

  • Grouped color palette

    Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on context, but should remain consistent within your app.

Color nameExampleColor variables
Critical
Image omitted: alert-color-palette-critical.png
Critical alert color scheme
  • Mobile variable

alert--critical-0

  • Web variable

--now-color_alert--critical-0

High
Image omitted: alert-color-palette-high.png
High alert color scheme
  • Mobile variable

alert--high-0

  • Web variable

--now-color_alert--high-0

Warning
Image omitted: alert-color-palette-warning.png
Warning alert color scheme
  • Mobile variable

alert--warning-0

  • Web variable

--now-color_alert--warning-0

Moderate
Image omitted: alert-color-palette-moderate.png
Moderate alert color scheme
  • Mobile variable

alert--moderate-0

  • Web variable

--now-color_alert--moderate-0

Info
Image omitted: alert-color-palette-info.png
Info alert color scheme
  • Mobile variable

alert--info-0

  • Web variable

--now-color_alert--info-0

Positive
Image omitted: alert-color-palette-positive.png
Positive alert color scheme
  • Mobile variable

alert--positive-0

  • Web variable

--now-color_alert--positive-0

Low
Image omitted: alert-color-palette-low.png
Low alert color scheme
  • Mobile variable

alert--low-0

  • Web variable

--now-color_alert--low-0

Disabled
Image omitted: alert-color-palette-disabled.png
Disabled alert color scheme
  • Mobile variable

alert-disabled-background

  • Web variable

--now-color_background--secondary

Critical \(Alternate\)
Image omitted: alert-color-palette-critical2.png
Critical alert color scheme alternate
  • Mobile variable

alert--critical-4

  • Web variable

--now-color_alert--critical-4

High \(Alternate\)
Image omitted: alert-color-palette-high2.png
High alert color scheme alternate
  • Mobile variable

alert--high-4

  • Web variable

--now-color_alert--high-4

Warning \(Alternate\)
Image omitted: alert-color-palette-warning2.png
Warning alert color scheme alternate
  • Mobile variable

alert--warning-4

  • Web variable

--now-color_alert--warning-4

Moderate \(Alternate\)
Image omitted: alert-color-palette-moderate2.png
Moderate alert color scheme alternate
  • Mobile variable

alert--moderate-4

  • Web variable

--now-color_alert--moderate-4

Info \(Alternate\)
Image omitted: alert-color-palette-info2.png
Info alert color scheme alternate
  • Mobile variable

alert--info-4

  • Web variable

--now-color_alert--info-4

Positive \(Alternate\)
Image omitted: alert-color-palette-positive2.png
Positive alert color scheme alternate
  • Mobile variable

alert--positive-4

  • Web variable

--now-color_alert--positive-4

Low \(Alternate\)
Image omitted: alert-color-palette-low2.png
Low alert color scheme alternate
  • Mobile variable

alert--low-4

  • Web variable

--now-color_alert--low-4

Disabled \(Alternate\)
Image omitted: alert-color-palette-disabled2.png
Disabled alert color scheme alternate
  • Mobile variable

alert-disabled-text

  • Web variable

--now-color_text--tertiary

Color nameExampleColor options
Blue
Image omitted: grouped-color-palette-blue.png
Blue grouped color scheme
  • Web variable

--now-color_grouped--blue-0

Brown
Image omitted: grouped-color-palette-brown.png
Brown grouped color scheme
  • Web variable

--now-color_grouped--brown-0

Gray
Image omitted: grouped-color-palette-gray.png
Gray grouped color scheme
  • Web variable

--now-color_grouped--gray-0

Green
Image omitted: grouped-color-palette-green.png
Green grouped color scheme
  • Web variable

--now-color_grouped--green-0

Green-Yellow
Image omitted: grouped-color-palette-green-yellow.png
Green-yellow grouped color scheme
  • Web variable

--now-color_grouped--green-yellow-0

Magenta
Image omitted: grouped-color-palette-magenta.png
Magenta grouped color scheme
  • Web variable

--now-color_grouped--magenta-0

Orange
Image omitted: grouped-color-palette-orange.png
Orange grouped color scheme
  • Web variable

--now-color_grouped--orange-0

Pink
Image omitted: grouped-color-palette-pink.png
Pink grouped color scheme
  • Web variable

--now-color_grouped--pink-0

Purple
Image omitted: grouped-color-palette-purple.png
Purple grouped color scheme
  • Web variable

--now-color_grouped--purple-0

Teal
Image omitted: grouped-color-palette-teal.png
Teal grouped color scheme
  • Web variable

--now-color_grouped--teal-0

Yellow
Image omitted: grouped-color-palette-yellow.png
Yellow grouped color scheme
  • Web variable

--now-color_grouped--yellow-0

Blue \(Alternate\)
Image omitted: grouped-color-palette-blue2.png
Blue grouped color scheme alternate
  • Web variable

--now-color_grouped--blue-4

Brown \(Alternate\)
Image omitted: grouped-color-palette-brown2.png
Brown grouped color scheme alternate
  • Web variable

--now-color_grouped--brown-4

Gray \(Alternate\)
Image omitted: grouped-color-palette-gray2.png
Gray grouped color scheme alternate
  • Web variable

--now-color_grouped--gray-4

Green \(Alternate\)
Image omitted: grouped-color-palette-green2.png
Green grouped color scheme alternate
  • Web variable

--now-color_grouped--green-4

Green-Yellow \(Alternate\)
Image omitted: grouped-color-palette-green-yellow2.png
Green-yellow grouped color scheme alternate
  • Web variable

--now-color_grouped--green-yellow-4

Magenta \(Alternate\)
Image omitted: grouped-color-palette-magenta2.png
Magenta grouped color scheme alternate
  • Web variable

--now-color_grouped--magenta-4

Orange \(Alternate\)
Image omitted: grouped-color-palette-orange2.png
Orange grouped color scheme alternate
  • Web variable

--now-color_grouped--orange-4

Pink \(Alternate\)
Image omitted: grouped-color-palette-pink2.png
Pink grouped color scheme alternate
  • Web variable

--now-color_grouped--pink-4

Purple \(Alternate\)
Image omitted: grouped-color-palette-purple2.png
Purple grouped color scheme alternate
  • Web variable

--now-color_grouped--purple-4

Teal \(Alternate\)
Image omitted: grouped-color-palette-teal2.png
Teal grouped color scheme alternate
  • Web variable

--now-color_grouped--teal-4

Yellow \(Alternate\)
Image omitted: grouped-color-palette-yellow2.png
Yellow grouped color scheme alternate
  • Web variable

--now-color_grouped--yellow-4