{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":34688,"path":"mobile/color-var-ui-rule.md","title":"Color variable support for UI rules","bundle":null,"doc_type":null,"release":"australia","body":"\n# Color variable support for UI rules\n\nLearn how to use color variables to change theming in your mobile UI rules.\n\n\n
\n\nUse the following color variables in the **Value** field of your UI rules with the **Operation** field set to **Set UI Style**\n\n - `BackgroundColorVariable`\n- `FontColorVariable` outside or within the `TextDecorator`\n\n 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:\n\n `{“BackgroundColorVariable”: “--now-color-secondary-3\", “BackgroundColor”: “#3f2c11”}`\n\n 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).\n\n\n\n\\[Omitted image \"color-var-example-1.png\"\\] Alt text: Color variable used in a ui action\n\n
## Mobile UI rule color guide\n\nColor variables are divided into Use the design guideline to identify the right color variable for your use case.\n\n- **Alert color palette**\n\n Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.\n\n- **Grouped color palette**\n\n 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.\n\n\n\n
\n\nColor name\n\n\n\nExample\n\n\n\nColor variables\n\n
\n\nCritical\n\n\n\n\\[Omitted image \"alert-color-palette-critical.png\"\\] Alt text: Critical alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--critical-0`\n\n- **Web variable**\n\n`--now-color_alert--critical-0`\n\n\n
\n\nHigh\n\n\n\n\\[Omitted image \"alert-color-palette-high.png\"\\] Alt text: High alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--high-0`\n\n- **Web variable**\n\n`--now-color_alert--high-0`\n\n\n
\n\nWarning\n\n\n\n\\[Omitted image \"alert-color-palette-warning.png\"\\] Alt text: Warning alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--warning-0`\n\n- **Web variable**\n\n`--now-color_alert--warning-0`\n\n\n
\n\nModerate\n\n\n\n\\[Omitted image \"alert-color-palette-moderate.png\"\\] Alt text: Moderate alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--moderate-0`\n\n- **Web variable**\n\n`--now-color_alert--moderate-0`\n\n\n
\n\nInfo\n\n\n\n\\[Omitted image \"alert-color-palette-info.png\"\\] Alt text: Info alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--info-0`\n\n- **Web variable**\n\n`--now-color_alert--info-0`\n\n\n
\n\nPositive\n\n\n\n\\[Omitted image \"alert-color-palette-positive.png\"\\] Alt text: Positive alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--positive-0`\n\n- **Web variable**\n\n`--now-color_alert--positive-0`\n\n\n
\n\nLow\n\n\n\n\\[Omitted image \"alert-color-palette-low.png\"\\] Alt text: Low alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert--low-0`\n\n- **Web variable**\n\n`--now-color_alert--low-0`\n\n\n
\n\nDisabled\n\n\n\n\\[Omitted image \"alert-color-palette-disabled.png\"\\] Alt text: Disabled alert color scheme\n\n\n\n- **Mobile variable**\n\n`alert-disabled-background`\n\n- **Web variable**\n\n`--now-color_background--secondary`\n\n\n
\n\nCritical \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-critical2.png\"\\] Alt text: Critical alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--critical-4`\n\n- **Web variable**\n\n`--now-color_alert--critical-4`\n\n\n
\n\nHigh \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-high2.png\"\\] Alt text: High alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--high-4`\n\n- **Web variable**\n\n`--now-color_alert--high-4`\n\n\n
\n\nWarning \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-warning2.png\"\\] Alt text: Warning alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--warning-4`\n\n- **Web variable**\n\n`--now-color_alert--warning-4`\n\n\n
\n\nModerate \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-moderate2.png\"\\] Alt text: Moderate alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--moderate-4`\n\n- **Web variable**\n\n`--now-color_alert--moderate-4`\n\n\n
\n\nInfo \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-info2.png\"\\] Alt text: Info alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--info-4`\n\n- **Web variable**\n\n`--now-color_alert--info-4`\n\n\n
\n\nPositive \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-positive2.png\"\\] Alt text: Positive alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--positive-4`\n\n- **Web variable**\n\n`--now-color_alert--positive-4`\n\n\n
\n\nLow \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-low2.png\"\\] Alt text: Low alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert--low-4`\n\n- **Web variable**\n\n`--now-color_alert--low-4`\n\n\n
\n\nDisabled \\(Alternate\\)\n\n\n\n\\[Omitted image \"alert-color-palette-disabled2.png\"\\] Alt text: Disabled alert color scheme alternate\n\n\n\n- **Mobile variable**\n\n`alert-disabled-text`\n\n- **Web variable**\n\n`--now-color_text--tertiary`\n\n\n
\n
\n\nColor name\n\n\n\nExample\n\n\n\nColor options\n\n
\n\nBlue\n\n\n\n\\[Omitted image \"grouped-color-palette-blue.png\"\\] Alt text: Blue grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--blue-0`\n\n\n
\n\nBrown\n\n\n\n\\[Omitted image \"grouped-color-palette-brown.png\"\\] Alt text: Brown grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--brown-0`\n\n\n
\n\nGray\n\n\n\n\\[Omitted image \"grouped-color-palette-gray.png\"\\] Alt text: Gray grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--gray-0`\n\n\n
\n\nGreen\n\n\n\n\\[Omitted image \"grouped-color-palette-green.png\"\\] Alt text: Green grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--green-0`\n\n\n
\n\nGreen-Yellow\n\n\n\n\\[Omitted image \"grouped-color-palette-green-yellow.png\"\\] Alt text: Green-yellow grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--green-yellow-0`\n\n\n
\n\nMagenta\n\n\n\n\\[Omitted image \"grouped-color-palette-magenta.png\"\\] Alt text: Magenta grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--magenta-0`\n\n\n
\n\nOrange\n\n\n\n\\[Omitted image \"grouped-color-palette-orange.png\"\\] Alt text: Orange grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--orange-0`\n\n\n
\n\nPink\n\n\n\n\\[Omitted image \"grouped-color-palette-pink.png\"\\] Alt text: Pink grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--pink-0`\n\n\n
\n\nPurple\n\n\n\n\\[Omitted image \"grouped-color-palette-purple.png\"\\] Alt text: Purple grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--purple-0`\n\n\n
\n\nTeal\n\n\n\n\\[Omitted image \"grouped-color-palette-teal.png\"\\] Alt text: Teal grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--teal-0`\n\n\n
\n\nYellow\n\n\n\n\\[Omitted image \"grouped-color-palette-yellow.png\"\\] Alt text: Yellow grouped color scheme\n\n\n\n- **Web variable**\n\n`--now-color_grouped--yellow-0`\n\n\n
\n\nBlue \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-blue2.png\"\\] Alt text: Blue grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--blue-4`\n\n\n
\n\nBrown \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-brown2.png\"\\] Alt text: Brown grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--brown-4`\n\n\n
\n\nGray \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-gray2.png\"\\] Alt text: Gray grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--gray-4`\n\n\n
\n\nGreen \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-green2.png\"\\] Alt text: Green grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--green-4`\n\n\n
\n\nGreen-Yellow \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-green-yellow2.png\"\\] Alt text: Green-yellow grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--green-yellow-4`\n\n\n
\n\nMagenta \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-magenta2.png\"\\] Alt text: Magenta grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--magenta-4`\n\n\n
\n\nOrange \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-orange2.png\"\\] Alt text: Orange grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--orange-4`\n\n\n
\n\nPink \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-pink2.png\"\\] Alt text: Pink grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--pink-4`\n\n\n
\n\nPurple \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-purple2.png\"\\] Alt text: Purple grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--purple-4`\n\n\n
\n\nTeal \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-teal2.png\"\\] Alt text: Teal grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--teal-4`\n\n\n
\n\nYellow \\(Alternate\\)\n\n\n\n\\[Omitted image \"grouped-color-palette-yellow2.png\"\\] Alt text: Yellow grouped color scheme alternate\n\n\n\n- **Web variable**\n\n`--now-color_grouped--yellow-4`\n\n\n
"}}