--- sourceDocument: Australia Mobile Configuration and Navigation sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile Release : - australia ft:locale : - en-US ft:publication_title : - Australia Mobile Configuration and Navigation ft:clusterId : - mobile bundleId : - mobile workflow : - Development, Data and Analytics --- # Color variable support for UI rules # Color variable support for UI rules {#ariaid-title1} * Release version: Australia * * Updated March 12, 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read 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` {#color-var-ui-rule__ul_nnz_533_ywb} 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://servicenow-prod.fluidtopics.net/HUfbiUinu9fPZKmCudi2vA "Create the actions that execute when your mobile UI rule conditions are met."). | | [ ] {#color-var-ui-rule__table_fbp_nfb_yvb} ## Mobile UI rule color guide {#color-var-ui-rule__section_vvh_wzp_1xb} 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-var-ui-rule__table_otd_c1q_1xb__entry__3} | Color name | Example | Color variables | |-|-|-| | Critical | | Mobile variable : `alert--critical-0` Web variable : `--now-color_alert--critical-0` | | High | | Mobile variable : `alert--high-0` Web variable : `--now-color_alert--high-0` | | Warning | | Mobile variable : `alert--warning-0` Web variable : `--now-color_alert--warning-0` | | Moderate | | Mobile variable : `alert--moderate-0` Web variable : `--now-color_alert--moderate-0` | | Info | | Mobile variable : `alert--info-0` Web variable : `--now-color_alert--info-0` | | Positive | | Mobile variable : `alert--positive-0` Web variable : `--now-color_alert--positive-0` | | Low | | Mobile variable : `alert--low-0` Web variable : `--now-color_alert--low-0` | | Disabled | ![Disabled alert color scheme]() | Mobile variable : `alert-disabled-background` Web variable : `--now-color_background--secondary` | | Critical (Alternate) | ![Critical alert color scheme alternate]() | Mobile variable : `alert--critical-4` Web variable : `--now-color_alert--critical-4` | | High (Alternate) | ![High alert color scheme alternate]() | Mobile variable : `alert--high-4` Web variable : `--now-color_alert--high-4` | | Warning (Alternate) | ![Warning alert color scheme alternate]() | Mobile variable : `alert--warning-4` Web variable : `--now-color_alert--warning-4` | | Moderate (Alternate) | ![Moderate alert color scheme alternate]() | Mobile variable : `alert--moderate-4` Web variable : `--now-color_alert--moderate-4` | | Info (Alternate) | ![Info alert color scheme alternate]() | Mobile variable : `alert--info-4` Web variable : `--now-color_alert--info-4` | | Positive (Alternate) | ![Positive alert color scheme alternate]() | Mobile variable : `alert--positive-4` Web variable : `--now-color_alert--positive-4` | | Low (Alternate) | ![Low alert color scheme alternate]() | Mobile variable : `alert--low-4` Web variable : `--now-color_alert--low-4` | | Disabled (Alternate) | ![Disabled alert color scheme alternate]() | Mobile variable : `alert-disabled-text` Web variable : `--now-color_text--tertiary` | [Table 1. Alert color palette] {#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3} | Color name | Example | Color options | |-|-|-| | Blue | ![Blue grouped color scheme]() | Web variable : `--now-color_grouped--blue-0` | | Brown | ![Brown grouped color scheme]() | Web variable : `--now-color_grouped--brown-0` | | Gray | ![Gray grouped color scheme]() | Web variable : `--now-color_grouped--gray-0` | | Green | ![Green grouped color scheme]() | Web variable : `--now-color_grouped--green-0` | | Green-Yellow | ![Green-yellow grouped color scheme]() | Web variable : `--now-color_grouped--green-yellow-0` | | Magenta | ![Magenta grouped color scheme]() | Web variable : `--now-color_grouped--magenta-0` | | Orange | ![Orange grouped color scheme]() | Web variable : `--now-color_grouped--orange-0` | | Pink | ![Pink grouped color scheme]() | Web variable : `--now-color_grouped--pink-0` | | Purple | ![Purple grouped color scheme]() | Web variable : `--now-color_grouped--purple-0` | | Teal | ![Teal grouped color scheme]() | Web variable : `--now-color_grouped--teal-0` | | Yellow | ![Yellow grouped color scheme]() | Web variable : `--now-color_grouped--yellow-0` | | Blue (Alternate) | ![Blue grouped color scheme alternate]() | Web variable : `--now-color_grouped--blue-4` | | Brown (Alternate) | ![Brown grouped color scheme alternate]() | Web variable : `--now-color_grouped--brown-4` | | Gray (Alternate) | ![Gray grouped color scheme alternate]() | Web variable : `--now-color_grouped--gray-4` | | Green (Alternate) | ![Green grouped color scheme alternate]() | Web variable : `--now-color_grouped--green-4` | | Green-Yellow (Alternate) | ![Green-yellow grouped color scheme alternate]() | Web variable : `--now-color_grouped--green-yellow-4` | | Magenta (Alternate) | ![Magenta grouped color scheme alternate]() | Web variable : `--now-color_grouped--magenta-4` | | Orange (Alternate) | ![Orange grouped color scheme alternate]() | Web variable : `--now-color_grouped--orange-4` | | Pink (Alternate) | ![Pink grouped color scheme alternate]() | Web variable : `--now-color_grouped--pink-4` | | Purple (Alternate) | ![Purple grouped color scheme alternate]() | Web variable : `--now-color_grouped--purple-4` | | Teal (Alternate) | ![Teal grouped color scheme alternate]() | Web variable : `--now-color_grouped--teal-4` | | Yellow (Alternate) | ![Yellow grouped color scheme alternate]() | Web variable : `--now-color_grouped--yellow-4` | [Table 2. Grouped color palette] {#color-var-ui-rule__table_f5d_c1q_1xb}