Core styles, colors, variants, and alternate color palettes

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 define the base theme, variants support accessibility needs, and alternate color palettes provide cosmetic customization options for end users.

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.

Theme colors in Theme Builder

When editing components, use the color picker to change the background color of the canvas to view how the component colors will render on different backgrounds.

注:

Updating the canvas color doesn't apply to the instance. Only hooks specific to components are applied on the instance if you publish 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 and Alternate color palettes in Theme Builder

Variants and alternate color palettes are both UX style records categorized as Variant, but they serve different purposes.

A variant is an alternate version of an existing theme, usually designed for accessibility, that your users can select in preferences. An example of a variant is the Dark version of the default Polaris or Coral 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 that you can make to a theme's colors and is designed for cosmetic purposes. Alternate color palettes allow users to toggle between different visual styles like light and dark options without affecting the core theme. You can define this palette in the Theme Builder Manager page for any theme, except for the default Polaris or default Coral themes. When you create an alternate color palette from an existing theme, it is grouped with the primary theme and initially shares the same logo, color, typography, and shape styles. The only initial difference is the unique name you assign to the palette.

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, define a secondary color, if needed. 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. There are two base palettes available, light and dark.

注:

Secondary and neutral colors cannot be edited in the dark alternate color palette.

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

注:

Dark variants don’t apply to the Core UI, previously referred to as UI16. The Core UI is the interface you use if Next Experience is inactive. However, dark variants extend to most aspects of the Next Experience.