Edit your theme colors

Edit and update your theme's core colors to create visual consistency and align with your brand.

Before you begin

Role required: admin

Procedure

1. Navigate to All > Now Experience Framework > Theme Builder.
   The Theme Builder landing page appears in the Home page view.
2. Use the Page drop-down list to select the Editor page view.

   Figure 1. Page drop-down list

   

3. From the Theme drop-down list, select the theme that you want to edit.
   The Global styles tab opens automatically with the Overview panel displayed.

   Figure 2. Editor page view

   

4. Under the Global styles tab, select the Color palette icon to access the color options.

   Figure 3. Global styles panel with Color tab selected

   

   1. Update your brand colors by selecting either Primary, Secondary, or Neutral, then use the color picker to select another color.
   2. Add additional brand colors, if needed.
      Note:

      Additional brand colors are supporting colors and by default aren’t tied to any components.
   3. Update any auto-generated UI colors using the drop-down list next to each UI element, if needed.
      Note:

      After you have saved changes to any of the color hooks, a Remove override symbol appears. Select the Remove override symbol to revert your changes back to the original auto-generated colors.

      

Result

If your theme is published, your edits are visible to users who have your theme applied on refresh. For information on publishing your theme, see Publish your themes with Theme Builder.