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: ui_builder_admin
For information on granular roles, see Granular admin roles.
Procedure
Navigate to All > Now Experience Framework > Theme Builder.
The Theme Builder landing page appears in the Home page view.
Use the Page drop-down list to select the Editor page view.
Image omitted: tb-editor-page-list.png
Page drop-down list with Editor selected.
Page drop-down list with Editor selected.
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.
Image omitted: tb-editor-page-view.png
Example view of the Editor page.
Example view of the Editor page.
- Under the Global styles tab, select the Color palette icon
Image omitted: tb-color-palette-icon.png
to access the color options.
to access the color options.
Image omitted: tb-color-palette-tab.png
Global styles tab with Color panel selected. \[Omitted image ""\] Alt text:
Global styles tab with Color panel selected. \[Omitted image ""\] Alt text:
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.
Image omitted: tb-color-undo.png
Remove override symbol.
Remove override symbol.
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.
Parent Topic:Working with Global styles