---
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-03-12"
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>