Configure Next Experience theming for mobile

  • Release version: Xanadu
  • Updated August 1, 2024
  • 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 details how to enable and configure Next Experience theming for mobile apps in ServiceNow, specifically for instances on the Utah release and later. It provides insight into theme selection and customization options available for enhancing the mobile user interface.

    Show full answer Show less

    Key Features

    • Next Experience Requirement: Next Experience theming is only available for Utah or later versions of ServiceNow. Ensure Next Experience is enabled on your instance.
    • Available Themes:
      • Polaris: The default theme for instances with Next Experience enabled, featuring a fixed Mobile Colors Default record that can be copied for customization.
      • Mobile Legacy: A fallback theme for instances upgraded to Utah or later without Next Experience enabled.
    • Theme and Style Creation: Create new themes on the UX Theme table. Default themes cannot be modified but can be copied and adjusted as needed.
    • Color Variables: Mobile apps utilize only color elements from UX styles; other attributes do not affect the mobile UI.

    Key Outcomes

    • Assigning Themes: Use the Mobile App Builder to set a theme via the Client Theme field. If this field is empty, the system defaults to either the Polaris or Mobile Legacy theme based on Next Experience status.
    • Consistent User Experience: Implement color variables in custom mobile components to maintain a cohesive look and feel. Various components such as UI rules, navigation sections, and mobile buttons can leverage these color variables.

    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.