Core styles, colors, variants, and alternate color palettes

  • 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 Core styles, colors, variants, and alternate color palettes

    This guide details how to customize the Next Experience UI by configuring core styles, variants, and alternate color palettes using Theme Builder. These adjustments enhance user experiences by allowing tailored visual elements for different user groups.

    Show full answer Show less

    Key Features

    • Core Styles: The foundation of the UI's visual elements, including color, shape, typography, and imagery.
    • Color Picker: A tool to change background colors, with real-time updates on contrast ratios to ensure accessibility.
    • Variants/Alternate Color Palettes: Options for users to select different versions of a theme, such as a Dark variant for improved accessibility.
    • Customization: Alternate color palettes allow modifications to themes, sharing traits with primary themes while allowing unique identifications through color selections.
    • Preview Functionality: Users can visualize how changes affect UI assets across the ServiceNow AI Platform.

    Key Outcomes

    By configuring these elements, customers can create a user-friendly interface that meets diverse accessibility needs and personal preferences, ultimately enhancing user satisfaction and engagement. Note that the Dark variant does not affect the core UI, which is used when Next Experience is disabled, but it is applicable to various UI assets such as catalog items, forms, and dashboards.

    You can tailor the look and feel of the Next Experience UI for different users by configuring the core styles, variants, and alternate color palettes.

    Core styles in Theme Builder

    A core style is the base version of a style. Core styles include color, shape and form, typography, and imagery.

    Colors in Theme Builder

    Use the color picker to change the background color of the canvas.
    Note:
    Updating the canvas color doesn't apply to the instance. Only hooks specific to components are applied on the instance if you apply an edited theme to the instance.
    When editing theme colors, you can view the contrast ratio in the color picker. The value updates when you change the color from the palette or My colors view.

    Variants/Alternate color palettes in Theme Builder

    A variant (or as it's called in Theme Builder alternate color palette) is an alternate version of an existing theme, which your users can select in preferences. An example of a variant is the Dark version of the default Polaris theme that is shipped with Next Experience. The Dark variant can be used to enhance accessibility for visually impaired users by replacing light backgrounds with darker ones and contrasting the text colors accordingly.

    An alternate color palette is a modification you can make to a theme's colors. It can be defined in the Theme Builder Manager page view to any theme, except to the default Polaris theme. When you use an existing theme to create an alternate color palette, the alternate color palette is grouped with that primary theme, and initially shares its logo, color, typography, and shape styles. At first, the only difference from the primary theme is that you assign it a unique name.

    Next, you define the primary color for the alternate color palette. This color is used to identify the navigation bar, menus, and other common components. Likewise, you define a secondary color if you want. If your interface doesn't require a secondary color, the primary color is used. Lastly, you define a neutral color to help define divider lines and containers.

    When the palette is created using the colors you selected, you have the option of renaming it. You can also preview all the UI assets available on the ServiceNow AI Platform to visualize how they are rendered when you apply them to your instance.

    Note:
    The Dark variant does not apply to the core UI, previously referred to as UI16. The core UI is the interface you use if Next Experience is disabled. However, the Dark variant extends to the following UI assets:
    • catalog items
    • classic environment forms and lists
    • dashboards
    • knowledge articles
    • reports
    • visual task boards
    • workspaces