---
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 theme considerations

# Color theme considerations for mobile {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Color Theme Considerations for Mobile

This guide provides essential insights on using color effectively in mobile applications to enhance user experience.
Proper color usage helps users navigate tasks efficiently and recognize important information quickly.
Show full answer Show less  

## Key Features

* **Consistency:** Maintain a consistent color scheme across your app for related tasks to aid user navigation.
* **Simplicity:** Limit your color palette to two or three colors for a cleaner, more accessible design.
* **High Contrast:** Ensure text and background colors have a high contrast ratio (at least 3:1) for readability, accommodating users with low vision or color blindness.
* **Color Variables:** Use color variables effectively when Next Experience is enabled, allowing for dynamic theme changes.

## Key Outcomes

By following these guidelines, you can create a visually appealing and user-friendly mobile application that enhances usability and accessibility. Effective color management will lead to improved user engagement and satisfaction with your app.  
Learn how to use color in your mobile applications to improve user experience. Using the right colors for your environment can help guide your users through your app and quickly identify important information.

## Using color {#color-guide-landing__section_rgn_mth_vwb}

Keep consistency in your color decisions throughout the app. Associating specific tasks or workflows with colors helps users know when they're in not in the right place. Consider using the same, or similar colors for related
applets. For example, selecting blue for your incident-related applets and green for work order applets can help your users get to related tasks quickly.

Avoid using too many colors. Simple designs of two to three colors results in a cleaner, more accessible layout.

Color can be used to provide contrast for greater readability. In areas where text appears, ensure that your text and background have a high level of contrast to accommodate both low vision and colorblind users. Web Content
Accessibility Guidelines (WCAG) 2.0 compliance requires a contrast ratio of at least 3:1. There are several tools online available to help with gauging color contrast.

High contrast, complementary colors can guide your user's focus. Use these colors to highlight areas of your applications that need your user's attention.

## General guidelines for color variables {#color-guide-landing__section_z3c_xhv_xvb}

Before you start using color variables, keep the following guidelines in mind.

Next Experience must be enabled
:   Color variables only take effect when Next Experience is enabled. Otherwise, color variables are ignored

Colors available for variables are on the UX Theme Properties table

:   Color variables use colors defined on the UX Theme Properties \[sys_ux_theme_property\]
    table.

Color variables are additive properties
:   Existing color properties (using hard-coded colors) continue to work if the new color variables aren't configured. However, color properties can't dynamically change the color of elements based on the theme​.

Color variables override color properties
:   Color variables override the corresponding non-variable color properties if Next Experience is enabled and the color variable value is found.
:   For example, given this UI rule action configuration:

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    and a web color map with this
    configuration:

        {"--now-color-primary-0": "#22ff00"}

    The resolved background color for this UI rule action will be `#22ff00`.

Color properties are used if a variable is not found or has no value
:   Color variable will not override if the variable is empty or the color variable value is not found. In these cases, the color property (HEX) is used.
:   For example, given this configuration:

        {"BackgroundColorVariable": "", "BackgroundColor": "#3f2c11"}

    The color value is `#3f2c11`.
:   Given this configuration:

        {"BackgroundColorVariable": "--now-color-primary-0", "BackgroundColor": "#3f2c11"}

    and a web color map with this configuration:

        {"--now-color-primary-1": "#1134a1"}

    The background color value is `#3f2c11`.

Color variables use a naming convention
:   The naming convention of color variables is to add a `Variable` suffix to existing color properties.​
:   For example, `BackgroundColorVariable` is used for `BackgroundColor`

Configure both hex and color variables
:

## Color variable support by component {#color-guide-landing__section_xrp_fj5_cxb}

Use these links to learn how to use color variables to change theming in your mobile components.

* [Color variable support for UI rules](https://servicenow-prod.fluidtopics.net/5r1Wq5HN8viunsvaY5G9pA "Learn how to use color variables to change theming in your mobile UI rules.")
* [Color variable support for icon UI sections](https://servicenow-prod.fluidtopics.net/YUTUODwBvU3UXaPDue6CkQ "Learn how to use color variables to change theming in your mobile icon UI sections.")
* [Color variable support for map icons](https://servicenow-prod.fluidtopics.net/sRO6V4DACPoFWrFPI1sDAw "Learn how to use color variables to change theming in your mobile map icons")
* [Color variable support for icons](https://servicenow-prod.fluidtopics.net/0Qzy8lFsmZUDcG_Ueop8XQ "Learn how to use color variables to change theming in your mobile map screens")
* [Color variable support for card view templates](https://servicenow-prod.fluidtopics.net/S_l8fo1kO82KQ6M6f69ddA "Learn how to use color variables to change theming in your mobile card views.")
* [Color variable support for card view buttons](https://servicenow-prod.fluidtopics.net/drVpIjGF8SfHd8k4ZcoXPw "Learn how to use color variables to change theming in your mobile card view buttons.")
* [Color variable support for input descriptions](https://servicenow-prod.fluidtopics.net/Z9oDJ1iGKGsHP2331ayHPA "Learn how to use color variables to change theming in your mobile input descriptions.")
{#color-guide-landing__ul_o3v_4j5_cxb}