---
sourceDocument: Xanadu Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/mobile

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# Configure Next Experience theming for mobile

# Configure Next Experience theming for mobile {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Learn how to enable Next Experience theming, and create and apply themes for your
mobile apps.

## Enable Next Experience {#config-ne-theming__section_adj_vz5_xvb}

Important:  
Use Next Experience theming on Utah and later versions of ServiceNow® instances.

To use Next Experience theming, you must have Next Experience enabled on your
instance. For activation instructions and more information on Next Experience, see [Exploring themes in Next
Experience](https://www.servicenow.com/docs/access?context=next-experience-theming&version=xanadu&pubname=xanadu-platform-user-interface&ft:locale=en-US).

## Available themes for mobile apps {#config-ne-theming__section_iwr_f1v_xvb}

Themes are defined by records in the UX Themes \[sys_ux_theme\] table. Your instance includes two base system themes for use in the mobile UI.

Polaris
:   Polaris is the default theme for instances with Next Experience enabled.
:   A new core UX Style \[sys_ux_style\] record called Mobile Colors Default is included with the Polaris theme. This record cannot be modified, but, user can create a copy of
    this record or create a new theme record. Give your new or copied record a higher priority value to override the colors specified in the Mobile Colors Default record.

Mobile Legacy
:   Mobile legacy is a fallback theme. Instances with upgraded to Utah or later
    that do not have Next Experience enabled use this theme.

Under the Polaris theme is a UX Style \[sys_ux_style\] record named Mobile Colors Default. This record defines the color variable names and the colors associated
with them.

## Create themes and styles {#config-ne-theming__section_lqb_d1v_xvb}

Create Next Experience themes on the UX Theme \[sys_ux_theme\] table on your instance.
By default, instances with Next Experience enabled use the Polaris
theme. Instances without Next Experience enabled use the Mobile Legacy theme. These themes can't be modified, but you can copy either of them and
change that copy.

Each UX Theme record is linked one or more UX Style \[sys_ux_style\] records that define the
appearance of the UI when you apply a theme to your instance. As with theme records, the default
style records aren't editable, but can be copied.

Learn more about Next Experience theme configuration at [Configuring Next Experience themes and
preferences](https://www.servicenow.com/docs/access?context=config-next-experience-themes-prefs&version=xanadu&pubname=xanadu-platform-user-interface&ft:locale=en-US).  
Important:  
Mobile apps only use the color elements of a UX style. Elements such as font, shadow, opacity, and other non-color elements in a theme do not change the appearance of the mobile UI.

## Assign a theme to your mobile client {#config-ne-theming__section_ibz_3hd_dwb}

|-|-|
| Set a theme for your mobile apps in the Mobile App Builder using the new Client Theme field. If the Client Theme field is empty :   Your instance checks the state of whether Next Experience is enabled and determines which UX Theme \[sys_ux_theme\] record to use for the mobile app. * If Next Experience is enabled, the Polaris theme is used. * If Next Experience is disabled, the Mobile Legacy theme is used. {#config-ne-theming__ul_uk2_4jd_dwb} If the Client Theme field is not empty :   Your mobile apps always use the theme specified in the field to theme the mobile app. |   |
[ ]

{#config-ne-theming__table_txx_53d_dwb}

## Use color variables on your custom mobile components {#config-ne-theming__section_axv_l1v_xvb}

Use color variables when designing your mobile components to provide a consistent user experience. The following components take advantage of color variables:

* UI rules
* Navigation sections
* Map pins
* Icons
* View templates
* Mobile view buttons
* Input description fields
{#config-ne-theming__ul_v55_5qf_zvb}

How to use color variables varies depending on the component you're building. For information on how to apply color variables on each of these components, see [Color theme considerations for mobile](https://servicenow-prod.fluidtopics.net/qnDgkNARyuVD9drY2L8MCw "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.").