Configure Next Experience theming for mobile

  • Release version: Washingtondc
  • Updated February 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 helps ServiceNow customers enable Next Experience theming for mobile applications, create custom themes, and understand the implications of using color variables in mobile components. It is essential for users on Utah and later versions of ServiceNow instances.

    Show full answer Show less

    Key Features

    • Next Experience Activation: Ensure Next Experience is enabled on your instance to utilize the theming capabilities.
    • Available Themes:
      • Polaris: The default theme for instances with Next Experience enabled.
      • Mobile Legacy: A fallback theme for instances without Next Experience enabled.
    • Themes and Styles Creation: Create themes in the UX Theme [sysuxtheme] table. Default themes cannot be modified but can be copied for customization.
    • Mobile App Theme Assignment: Use the Client Theme field in the Mobile App Builder to specify which theme to apply to mobile apps.
    • Color Variables: Leverage color variables in custom mobile components to maintain a consistent user experience.

    Key Outcomes

    By following this guide, customers can effectively manage the appearance of their mobile applications, ensuring a cohesive and customized user experience. Users will be able to apply color styles appropriately while acknowledging that non-color elements will not affect the mobile UI. Properly assigning themes will enhance the branding and usability of their mobile apps.

    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.