--- sourceDocument: Xanadu ServiceNow AI Platform user interface sourceDocumentLink: https://www.servicenow.com/docs/r/xanadu/platform-user-interface Release : - xanadu ft:locale : - en-US ft:publication_title : - Xanadu ServiceNow AI Platform user interface ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Manage or edit a theme with Theme Builder # Manage or edit a theme with Theme Builder {#ariaid-title1} * Release version: Xanadu * * Updated August 1, 2024 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read Customize and manage your theme and styling in a time and cost efficient way. After customizing, publish your new theme to either a web or mobile implementation of your instance. ## Before you begin Role required: admin ## Procedure 1. Navigate to AllNow Experience FrameworkThemesTheme Builder. The Theme Builder landing page opens in a new tab and is displayed in the Home page view. 2. From the Home page view, select Manager page view to see all available themes. Figure 1. Page menu From the Manager page view, you have the choice of viewing existing themes in two ways. You can choose the Grid view or the List view. Note: In both the Grid and List views, your published and unpublished themes are grouped separately. The published themes are themes that appear in the user's theme preference. View your web and mobile themes by selecting either the Web or Mobile button. Figure 2. Grid view Figure 3. List view The More actions (![More actions icon.]()) icon for published themes contains the following options: * Duplicate * Delete * Add alternate color palette * Unpublish * Mark as default Note: This option appears if the theme isn't the current default theme. {#tb-edit-theme__ul_vmw_dpf_p2c} The More actions (![More actions icon.]()) icon for published themes with the alternate color palettes defined contains the following options: * Edit group name * Duplicate * Delete * Unpublish * Mark as default Note: This option appears if the theme isn't the current default theme. {#tb-edit-theme__ul_plw_2pf_p2c} The More actions (![More actions icon.]()) icons for the unpublished themes contains the following options: * Duplicate * Delete * Add alternate color palette * Publish {#tb-edit-theme__ul_el5_fpf_p2c} 3. Select Editor page view and choose the theme you want to edit from the Theme drop-down list.In the Editor page view, you can see only the theme that you select. To see every theme that you have created in the same screen, switch to the Manager page view. Figure 4. Select a theme from the Theme drop-down list Note: When you select the theme you want to work on, verify that you selected the correct scope for the theme from the application scope picker.Figure 5. Application Scope Picker 4. Review and update the Global styles, as needed. Figure 6. Review global styles Note: The following style records are generated with your theme: * Your brand palette: Update the interface colors for your brand. * Logo: Update the logo. You can upload the logo during the theme application either from imagery or the overview page. For more information, see [Upload a logo while publishing a theme with Theme Builder](https://www.servicenow.com/docs/gngpt1iFohjrnPcVD9AMTw "Upload your logo while publishing a theme to your instance using the Editor view. If you previously applied a logo to your theme, you can upload a new one in Theme Builder."). * Font Family: Update the fonts applied globally to your experience. The fonts are used in headlines, titles, subtitles, body text, and captions. * Shape: Update the corner shapes of on-screen components. {#tb-edit-theme__ul_kb5_l1d_dxb} 1. **Optional:** To change the auto-generated UI colors for more in-depth editing, select the Color palette (![Color palette icon.]()) icon from the Global styles color panel. Use the drop-down list next to each UI element to access the color options. 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. ![Remove override symbol.]() {#tb-edit-theme__substeps_wgb_sgz_ddc} 5. **Optional:** To preview your theme before publishing it to your instance, select the Experience preview tab. ![Experience preview tab.]() Select the experience that you want to preview from the Experience drop-down. An actual live instance appears with all the theme selections applied. You can preview it before implementing the selected themes on the actual instance. Note: Select the Open in new tab (![Open in new tab.]()) icon to open the experience in a new tab. You can see how your unpublished theme interacts with your selected experience. Figure 7. Preview of your experience with theme applied Note: For published themes, data in the Experience preview is live data. The changes that you make in the preview are reflected on your instance. 6. Publish your theme. For more information, see [Publish your themes with Theme Builder](https://www.servicenow.com/docs/9x9xU3vPKp0CoX5Sr~7d1w "Publish multiple themes to your web instance or a single theme to your mobile instance to reflect your company's brand."). * **[Core styles, colors, variants, and alternate color palettes](https://www.servicenow.com/docs/IyH3VGgImYDMB6q2pnuFGQ)** You can tailor the look and feel of the Next Experience UI for different users by configuring the core styles, variants, and alternate color palettes. * **[Add an alternate color palette](https://www.servicenow.com/docs/Wc8oxaJD20yvk3f_9jprwQ)** Customize a Theme Builder theme by creating an alternate color palette for the theme and publishing it to your instance. * **[Preview components](https://www.servicenow.com/docs/rP7Yv~F7xOCp4120NPirrw)** As you're creating or managing your theme, you can preview the components available for inclusion on your instance. * **[Edit components](https://www.servicenow.com/docs/JMAWYA_Hy0tRlBfrQ5Pojw)** Edit Theme Builder individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks that you can edit are specific to each type of component. *[\>]: and then