Configure Next Experience theming for mobile

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read

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

    Enable Next Experience

    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.

    Available themes for mobile apps

    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

    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.

    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

    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.
    If the Client Theme field is not empty
    Your mobile apps always use the theme specified in the field to theme the mobile app.

    Use color variables on your custom mobile components

    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

    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.