Create a theme record for your web or mobile experiences by using the Home view in the Theme Builder application.

Before you begin

Once you've downloaded Theme Builder from the ServiceNow Store, you must activate the plugin (sn_theme_builder). To activate the Theme Builder plugin, see Activate a plugin.

Role required: admin

Procedure

  1. Navigate to All > Now Experience Framework > Themes > Theme Builder.
  2. Confirm that Home is selected from the Page menu at the top of the screen.
    Figure 1. Theme Builder Home screen
    Theme Builder Home screen where you can create and use visual themes.
  3. Select Create a theme.
    The Before we get started wizard appears to guide you through your brand configurations, as described in the next steps. The theme record is saved automatically as you work.
  4. Start defining your new theme by selecting Continue.
  5. Insert the name and a description of your new theme, and select Next.
    Figure 2. Your brand's primary color
    Your brand's primary color.
  6. Select the Primary tile, select your brand’s primary color, and review the simplified preview to see where the selected color displays in your instance.
    • In the Color Name dialog box, you can select the color model that you prefer: HEX, RGB, or HSL.
    • 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.
  7. After you identify the primary color of your brand, select Apply, and then select Next.
  8. If your brand includes a secondary color, repeat the previous step on the secondary color screen.
  9. Repeat the previous step to define a neutral brand color for divider lines and surface containers.
  10. (Optional) Choose additional colors for your brand and select Next.
  11. Upload your brand logo and review the simplified preview to verify that it appears as expected with the primary color you chose, and then select Next.
  12. Select the preferred font for your text and select Next.
    Note: If you prefer to customize your font, see Create a Next Experience style. After you save your customized font type and refresh the page, the new font appears as Custom Font. If you delete the custom font from your theme record, the font reverts to Source Sans Pro as the default.
  13. Select the corner shape of your components in the interface, such as the buttons, modals, and drop-down menus, and select Next.
    Note: If you prefer to customize your shape, see Create a Next Experience style. After you save your customized shape and refresh the page, the new shape appears as Mixed. This custom value is also displayed in the Component Styles tab, where you can edit the custom value.
  14. Review your selections and select Create theme.
    Note: You can select Back to make changes in the wizard before selecting Create theme.
    After creating your theme in the wizard, you’re directed to the Editor view of the theme where you can continue modifying or apply your theme.