Configure Next Experience theming for mobile

  • Release version: Yokohama
  • Updated January 30, 2025
  • 2 minutes to read
    • Summarize
    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 Configure Next Experience theming for mobile

    This guide explains how to enable and configure Next Experience theming specifically for mobile apps in ServiceNow instances running Utah or later versions. Next Experience theming allows you to customize the color scheme of your mobile user interface, enhancing user experience and brand consistency.

    Show full answer Show less

    Next Experience must be enabled on your instance before applying these theming capabilities. Without it, your instance defaults to a legacy mobile theme.

    Available Themes for Mobile Apps

    • Polaris: The default theme when Next Experience is enabled. It includes a core UX Style record named Mobile Colors Default that defines color variables for mobile UI. This record is not editable, but you can create copies or new theme records with a higher priority to override default colors.
    • Mobile Legacy: The fallback theme used when Next Experience is not enabled on Utah or later instances.

    Creating and Managing Themes

    Themes are managed via the UX Theme [sysuxtheme] table, and each theme links to one or more UX Style [sysuxstyle] records that define the UI’s appearance. Default Polaris and Mobile Legacy themes cannot be modified directly but can be copied and customized.

    Note that mobile apps only utilize the color elements of a UX style; other style properties like font or shadow have no effect on the mobile UI.

    Assigning Themes to Mobile Clients

    Use the Client Theme field in the Mobile App Builder to specify which theme the mobile app should use:

    • If the Client Theme field is empty, the instance automatically applies the Polaris theme if Next Experience is enabled, or the Mobile Legacy theme if disabled.
    • If the Client Theme field is set, the mobile app uses the specified theme regardless of Next Experience status.

    Using Color Variables in Custom Mobile Components

    To maintain a consistent and cohesive user experience, leverage color variables in your custom mobile components. Components supporting color variables include:

    • UI rules
    • Navigation sections
    • Map pins
    • Icons
    • View templates
    • Mobile view buttons
    • Input description fields

    Implementation details for applying color variables vary by component type. Refer to the relevant documentation for best practices on integrating color variables into your mobile UI elements.

    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.