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
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:
For details on creating these UI rule actions, see Create a mobile UI rule action. |
[Omitted image "color-var-example-1.png"] Alt text: Color variable used in a ui action |
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 name |
Example |
Color variables |
|---|---|---|
|
Critical |
[Omitted image "alert-color-palette-critical.png"] Alt text: Critical alert color scheme |
|
|
High |
[Omitted image "alert-color-palette-high.png"] Alt text: High alert color scheme |
|
|
Warning |
[Omitted image "alert-color-palette-warning.png"] Alt text: Warning alert color scheme |
|
|
Moderate |
[Omitted image "alert-color-palette-moderate.png"] Alt text: Moderate alert color scheme |
|
|
Info |
[Omitted image "alert-color-palette-info.png"] Alt text: Info alert color scheme |
|
|
Positive |
[Omitted image "alert-color-palette-positive.png"] Alt text: Positive alert color scheme |
|
|
Low |
[Omitted image "alert-color-palette-low.png"] Alt text: Low alert color scheme |
|
|
Disabled |
[Omitted image "alert-color-palette-disabled.png"] Alt text: Disabled alert color scheme |
|
|
Critical (Alternate) |
[Omitted image "alert-color-palette-critical2.png"] Alt text: Critical alert color scheme alternate |
|
|
High (Alternate) |
[Omitted image "alert-color-palette-high2.png"] Alt text: High alert color scheme alternate |
|
|
Warning (Alternate) |
[Omitted image "alert-color-palette-warning2.png"] Alt text: Warning alert color scheme alternate |
|
|
Moderate (Alternate) |
[Omitted image "alert-color-palette-moderate2.png"] Alt text: Moderate alert color scheme alternate |
|
|
Info (Alternate) |
[Omitted image "alert-color-palette-info2.png"] Alt text: Info alert color scheme alternate |
|
|
Positive (Alternate) |
[Omitted image "alert-color-palette-positive2.png"] Alt text: Positive alert color scheme alternate |
|
|
Low (Alternate) |
[Omitted image "alert-color-palette-low2.png"] Alt text: Low alert color scheme alternate |
|
|
Disabled (Alternate) |
[Omitted image "alert-color-palette-disabled2.png"] Alt text: Disabled alert color scheme alternate |
|
|
Color name |
Example |
Color options |
|---|---|---|
|
Blue |
[Omitted image "grouped-color-palette-blue.png"] Alt text: Blue grouped color scheme |
|
|
Brown |
[Omitted image "grouped-color-palette-brown.png"] Alt text: Brown grouped color scheme |
|
|
Gray |
[Omitted image "grouped-color-palette-gray.png"] Alt text: Gray grouped color scheme |
|
|
Green |
[Omitted image "grouped-color-palette-green.png"] Alt text: Green grouped color scheme |
|
|
Green-Yellow |
[Omitted image "grouped-color-palette-green-yellow.png"] Alt text: Green-yellow grouped color scheme |
|
|
Magenta |
[Omitted image "grouped-color-palette-magenta.png"] Alt text: Magenta grouped color scheme |
|
|
Orange |
[Omitted image "grouped-color-palette-orange.png"] Alt text: Orange grouped color scheme |
|
|
Pink |
[Omitted image "grouped-color-palette-pink.png"] Alt text: Pink grouped color scheme |
|
|
Purple |
[Omitted image "grouped-color-palette-purple.png"] Alt text: Purple grouped color scheme |
|
|
Teal |
[Omitted image "grouped-color-palette-teal.png"] Alt text: Teal grouped color scheme |
|
|
Yellow |
[Omitted image "grouped-color-palette-yellow.png"] Alt text: Yellow grouped color scheme |
|
|
Blue (Alternate) |
[Omitted image "grouped-color-palette-blue2.png"] Alt text: Blue grouped color scheme alternate |
|
|
Brown (Alternate) |
[Omitted image "grouped-color-palette-brown2.png"] Alt text: Brown grouped color scheme alternate |
|
|
Gray (Alternate) |
[Omitted image "grouped-color-palette-gray2.png"] Alt text: Gray grouped color scheme alternate |
|
|
Green (Alternate) |
[Omitted image "grouped-color-palette-green2.png"] Alt text: Green grouped color scheme alternate |
|
|
Green-Yellow (Alternate) |
[Omitted image "grouped-color-palette-green-yellow2.png"] Alt text: Green-yellow grouped color scheme alternate |
|
|
Magenta (Alternate) |
[Omitted image "grouped-color-palette-magenta2.png"] Alt text: Magenta grouped color scheme alternate |
|
|
Orange (Alternate) |
[Omitted image "grouped-color-palette-orange2.png"] Alt text: Orange grouped color scheme alternate |
|
|
Pink (Alternate) |
[Omitted image "grouped-color-palette-pink2.png"] Alt text: Pink grouped color scheme alternate |
|
|
Purple (Alternate) |
[Omitted image "grouped-color-palette-purple2.png"] Alt text: Purple grouped color scheme alternate |
|
|
Teal (Alternate) |
[Omitted image "grouped-color-palette-teal2.png"] Alt text: Teal grouped color scheme alternate |
|
|
Yellow (Alternate) |
[Omitted image "grouped-color-palette-yellow2.png"] Alt text: Yellow grouped color scheme alternate |
|
---
title: Color variable support for UI rules
description: Learn how to use color variables to change theming in your mobile UI rules.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/mobile/color-var-ui-rule.html
release: australia
topic_type: reference
last_updated: "2026-09-10"
reading_time_minutes: 3
breadcrumb: [Color theme considerations, Configure theming, Next Experience theming, Configuring the Mobile Platform, Mobile Platform]
---
# Color variable support for UI rules
Learn how to use color variables to change theming in your mobile UI rules.
<table id="table_fbp_nfb_yvb"><tbody><tr><td>
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](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/mobile/create-mobile-ui-rule-action.md).
</td><td>
\[Omitted image "color-var-example-1.png"\] Alt text: Color variable used in a ui action
</td></tr></tbody>
</table>## 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.
<table id="table_otd_c1q_1xb"><thead><tr><th>
Color name
</th><th>
Example
</th><th>
Color variables
</th></tr></thead><tbody><tr><td>
Critical
</td><td>
\[Omitted image "alert-color-palette-critical.png"\] Alt text: Critical alert color scheme
</td><td>
- **Mobile variable**
`alert--critical-0`
- **Web variable**
`--now-color_alert--critical-0`
</td></tr><tr><td>
High
</td><td>
\[Omitted image "alert-color-palette-high.png"\] Alt text: High alert color scheme
</td><td>
- **Mobile variable**
`alert--high-0`
- **Web variable**
`--now-color_alert--high-0`
</td></tr><tr><td>
Warning
</td><td>
\[Omitted image "alert-color-palette-warning.png"\] Alt text: Warning alert color scheme
</td><td>
- **Mobile variable**
`alert--warning-0`
- **Web variable**
`--now-color_alert--warning-0`
</td></tr><tr><td>
Moderate
</td><td>
\[Omitted image "alert-color-palette-moderate.png"\] Alt text: Moderate alert color scheme
</td><td>
- **Mobile variable**
`alert--moderate-0`
- **Web variable**
`--now-color_alert--moderate-0`
</td></tr><tr><td>
Info
</td><td>
\[Omitted image "alert-color-palette-info.png"\] Alt text: Info alert color scheme
</td><td>
- **Mobile variable**
`alert--info-0`
- **Web variable**
`--now-color_alert--info-0`
</td></tr><tr><td>
Positive
</td><td>
\[Omitted image "alert-color-palette-positive.png"\] Alt text: Positive alert color scheme
</td><td>
- **Mobile variable**
`alert--positive-0`
- **Web variable**
`--now-color_alert--positive-0`
</td></tr><tr><td>
Low
</td><td>
\[Omitted image "alert-color-palette-low.png"\] Alt text: Low alert color scheme
</td><td>
- **Mobile variable**
`alert--low-0`
- **Web variable**
`--now-color_alert--low-0`
</td></tr><tr><td>
Disabled
</td><td>
\[Omitted image "alert-color-palette-disabled.png"\] Alt text: Disabled alert color scheme
</td><td>
- **Mobile variable**
`alert-disabled-background`
- **Web variable**
`--now-color_background--secondary`
</td></tr><tr><td>
Critical \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-critical2.png"\] Alt text: Critical alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--critical-4`
- **Web variable**
`--now-color_alert--critical-4`
</td></tr><tr><td>
High \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-high2.png"\] Alt text: High alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--high-4`
- **Web variable**
`--now-color_alert--high-4`
</td></tr><tr><td>
Warning \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-warning2.png"\] Alt text: Warning alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--warning-4`
- **Web variable**
`--now-color_alert--warning-4`
</td></tr><tr><td>
Moderate \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-moderate2.png"\] Alt text: Moderate alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--moderate-4`
- **Web variable**
`--now-color_alert--moderate-4`
</td></tr><tr><td>
Info \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-info2.png"\] Alt text: Info alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--info-4`
- **Web variable**
`--now-color_alert--info-4`
</td></tr><tr><td>
Positive \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-positive2.png"\] Alt text: Positive alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--positive-4`
- **Web variable**
`--now-color_alert--positive-4`
</td></tr><tr><td>
Low \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-low2.png"\] Alt text: Low alert color scheme alternate
</td><td>
- **Mobile variable**
`alert--low-4`
- **Web variable**
`--now-color_alert--low-4`
</td></tr><tr><td>
Disabled \(Alternate\)
</td><td>
\[Omitted image "alert-color-palette-disabled2.png"\] Alt text: Disabled alert color scheme alternate
</td><td>
- **Mobile variable**
`alert-disabled-text`
- **Web variable**
`--now-color_text--tertiary`
</td></tr></tbody>
</table><table id="table_f5d_c1q_1xb"><thead><tr><th>
Color name
</th><th>
Example
</th><th>
Color options
</th></tr></thead><tbody><tr><td>
Blue
</td><td>
\[Omitted image "grouped-color-palette-blue.png"\] Alt text: Blue grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--blue-0`
</td></tr><tr><td>
Brown
</td><td>
\[Omitted image "grouped-color-palette-brown.png"\] Alt text: Brown grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--brown-0`
</td></tr><tr><td>
Gray
</td><td>
\[Omitted image "grouped-color-palette-gray.png"\] Alt text: Gray grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--gray-0`
</td></tr><tr><td>
Green
</td><td>
\[Omitted image "grouped-color-palette-green.png"\] Alt text: Green grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--green-0`
</td></tr><tr><td>
Green-Yellow
</td><td>
\[Omitted image "grouped-color-palette-green-yellow.png"\] Alt text: Green-yellow grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--green-yellow-0`
</td></tr><tr><td>
Magenta
</td><td>
\[Omitted image "grouped-color-palette-magenta.png"\] Alt text: Magenta grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--magenta-0`
</td></tr><tr><td>
Orange
</td><td>
\[Omitted image "grouped-color-palette-orange.png"\] Alt text: Orange grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--orange-0`
</td></tr><tr><td>
Pink
</td><td>
\[Omitted image "grouped-color-palette-pink.png"\] Alt text: Pink grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--pink-0`
</td></tr><tr><td>
Purple
</td><td>
\[Omitted image "grouped-color-palette-purple.png"\] Alt text: Purple grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--purple-0`
</td></tr><tr><td>
Teal
</td><td>
\[Omitted image "grouped-color-palette-teal.png"\] Alt text: Teal grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--teal-0`
</td></tr><tr><td>
Yellow
</td><td>
\[Omitted image "grouped-color-palette-yellow.png"\] Alt text: Yellow grouped color scheme
</td><td>
- **Web variable**
`--now-color_grouped--yellow-0`
</td></tr><tr><td>
Blue \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-blue2.png"\] Alt text: Blue grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--blue-4`
</td></tr><tr><td>
Brown \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-brown2.png"\] Alt text: Brown grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--brown-4`
</td></tr><tr><td>
Gray \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-gray2.png"\] Alt text: Gray grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--gray-4`
</td></tr><tr><td>
Green \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-green2.png"\] Alt text: Green grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--green-4`
</td></tr><tr><td>
Green-Yellow \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-green-yellow2.png"\] Alt text: Green-yellow grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--green-yellow-4`
</td></tr><tr><td>
Magenta \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-magenta2.png"\] Alt text: Magenta grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--magenta-4`
</td></tr><tr><td>
Orange \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-orange2.png"\] Alt text: Orange grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--orange-4`
</td></tr><tr><td>
Pink \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-pink2.png"\] Alt text: Pink grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--pink-4`
</td></tr><tr><td>
Purple \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-purple2.png"\] Alt text: Purple grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--purple-4`
</td></tr><tr><td>
Teal \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-teal2.png"\] Alt text: Teal grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--teal-4`
</td></tr><tr><td>
Yellow \(Alternate\)
</td><td>
\[Omitted image "grouped-color-palette-yellow2.png"\] Alt text: Yellow grouped color scheme alternate
</td><td>
- **Web variable**
`--now-color_grouped--yellow-4`
</td></tr></tbody>
</table>| title | Color variable support for UI rules |
| description | Learn how to use color variables to change theming in your mobile UI rules. |
| locale | en-US |
| canonical_url | https://www.servicenow.com/docs/r/australia/mobile/color-var-ui-rule.html |
| release | australia |
| topic_type | reference |
| last_updated | 2026-09-10 |
| reading_time_minutes | 3 |
| breadcrumb | Color theme considerationsConfigure themingNext Experience themingConfiguring the Mobile PlatformMobile Platform |