Working with themes in Next Experience
Summarize
Summary of Working with themes in Next Experience
Theming in Next Experience allows ServiceNow customers to customize the visual appearance of their platform to align with their brand identity. Using the Theme Builder, customers can create, edit, preview, and publish themes, adjusting colors, typography, imagery, shapes, and forms while maintaining the ServiceNow design system's overall look and feel. Theming applies primarily to the classic environment elements such as Lists, Forms, and Dashboards, though custom components do not reflect these themes.
Show less
Key Features
- Default Themes: Coral theme is enabled by default for new instances, while upgraded instances retain their previous themes like Polaris or custom-created themes. Customers can publish or add Coral themes using the Theme Builder or appropriate tables.
- Theme Records and Styles: Themes are built by copying existing themes (Polaris or Coral) or Theme Builder records. Styles, including Core styles (color, typography, imagery) and Variant styles (e.g., dark mode or accessibility variants), define theme appearance. Styles have an order value determining override priority.
- Dark Theme Support: Dark mode reduces blue light and improves usability in low-light environments. Supported on workspaces, lists, forms, dashboards, and reports. Customers can use default dark variants in Polaris and Coral or create custom dark palettes via Theme Builder.
- Theme-able Empty State Images: Customize empty state visuals to guide users and enhance user experience during no-content scenarios.
- Login Page Customization: Admins can configure Next Experience login illustrations, welcome text, background colors, and remove gradients to reflect company branding.
- Guided Tours and Support: Theme Builder includes guided tours and dark mode options to ease theme creation. Help resources and admin support videos are available.
Practical Application and Outcomes
ServiceNow admins can leverage Theme Builder to efficiently implement upgrade-safe themes that visually represent their brand across the Next Experience platform. By managing core and variant styles, admins ensure accessibility and user preference options, including light and dark modes. Customizing empty states and login pages further refines the user interface, improving user engagement and brand consistency. This theming capability empowers organizations to deliver a cohesive and branded user experience without compromising platform stability or upgrade paths.
Themes let you customize the visual experience to match your brand.
Quickly create, edit, preview, and publish themes to your experiences using Theme Builder. See Configure Next Experience with Theme Builder for more information.
Theming at a glance
- Theming is the ability to customize the Next Experience Design System to reflect your product or brand.
- Theming means styling various aspects of the ServiceNow® platform while maintaining the overall look and feel.
- Theming typically involves changing the colors to your company brand colors but can also include typography, imagery, shape and form.
Next Experience default themes
Customers have the Next Experience Coral theme enabled by default on their instance.
Theme record
This image shows the default Polaris theme, which is read-only. You create your own themes and styles to be used by experiences in your instance by either copying the Polaris or Coral theme or by copying a Theme Builder theme record. If you copy either the Polaris or Coral theme, you also must copy the styles under UX Theme Styles and make changes to those styles, as desired. At least one Core type style must be defined.
Theme styles
- Order
- Style records with higher-order values override styles with lower values. The base system styles all have the order 0. If you meet the Applicability constraint, styles with higher values override the base system styles. If not, the lower-value style is used.
- Style
- Style records define reusable styles that together comprise a theme. Core styles include color, shape and form, typography, and imagery. Variants are a different version of the theme, commonly different colors, that users can select in preferences. The most common use of variants is for accessibility purposes, particularly to account for color blindness. If you decide to use a dark theme, consider selecting the Polaris or Coral theme or create a dark alternate color palette in Theme Builder.
- Type
- Styles can be of either the Core type or the Variant type. Core styles are active by default. Users can choose from available variants from their Theme user preference, and those variant styles override the core style. Theme Builder doesn't automatically generate dark theme variants; however, you can create a dark alternate color palette with limited customization. For more information, see Add an alternate color palette. The Polaris and Coral themes include a Dark Theme variant that is available on instances with Next Experience enabled.