Working with themes in Next Experience
Summarize
Summary of Working with themes in Next Experience
Theming in Next Experience enables ServiceNow customers to customize the visual appearance of their platform to align with company branding. This includes modifying colors, typography, imagery, and shapes across various elements like lists, forms, dashboards, and login pages. Theming helps maintain the overall ServiceNow look and feel while reflecting unique brand identities.
Show less
Themes are managed through the Theme Builder, a core plugin included with Next Experience. Theme Builder allows you to create, edit, preview, and publish themes efficiently and safely during upgrades. Note that theming applies primarily to the classic environment; custom components do not reflect theme changes.
Key Features
- Default Themes: New instances use the Next Experience Coral theme by default, while upgraded instances retain their previous themes (e.g., Polaris). You can publish Coral or custom themes via Theme Builder.
- Theme Records and Styles: Themes are created by cloning default themes (Polaris or Coral) or existing Theme Builder themes. You must also clone and modify associated style records, which define colors, typography, shapes, and imagery.
- Core and Variant Styles: Core styles define the main theme attributes and are active by default. Variant styles provide alternative versions of a theme (e.g., dark mode or accessibility variants) that users can select in their preferences.
- Dark Theme Support: Dark themes reduce blue light for easier viewing in low-light settings. Polaris and Coral themes include dark variants. Theme Builder allows creation of dark color palettes but does not auto-generate dark variants.
- Theme-able Empty State Images: Customize empty state visuals to enhance user guidance and engagement.
- Login Page Customization: Configure login illustrations, background colors, and remove gradients to ensure the login experience aligns with your brand.
- Guided Tours and Help: Theme Builder offers guided tours and resources to assist admins in mastering theme creation and management.
Key Outcomes
- Deliver a branded and consistent user interface across ServiceNow experiences that reflect your company identity.
- Provide users with customizable theme variants such as dark mode to enhance accessibility and comfort.
- Maintain upgrade-safe theming practices with Theme Builder, ensuring customizations persist through platform updates.
- Enhance user experience with customized empty state images and tailored login page designs.
Themes enable you to tailor the visual experience for your users, helping to update the look and feel to be more like 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
New customers launching on Zurich will 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 cloning the Polaris or Coral theme or by cloning a Theme Builder theme record. If you clone either the Polaris or Coral theme, you also must clone 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.