Create a theme with AI in Theme Builder

  • Versão de lançamento: Australia
  • Atualizado 12 de mar. de 2026
  • 2 min. de leitura

    • Use an AI-powered theme creation from within Theme Builder to generate themes from brand images, preview, and refine results all within the updated Create a theme wizard.

    Antes de Iniciar

    This feature requires:

    Role required: ui_builder_admin

    For information on granular roles, see Granular admin roles.

    Procedimento

    1. Navigate to All > Now Experience Framework > Themes > Theme Builder.
      The Theme Builder landing page opens in a new tab and is displayed in the Home page view.
      Figura 1. Theme Builder Home screen
      Theme Builder Home screen.
    2. Select Create a theme.
      The Create a theme wizard appears to guide you through your brand configurations, as described in the next steps.Your selections are saved automatically as you progress through the wizard.
    3. Enter the name and a description of your new theme, and select Next.
    4. Choose how to define your theme colors.
      OptionAction
      Upload brand image AI automatically extracts a color palette from your image.
      Select Handpick my colors Manually choose your theme colors
      Figura 2. Generate theme colors using AI or manual selection
      Theme Creation wizard showing the option to upload a brand image or handpick colors to generate a color palette.
    5. If you chose to upload a brand image, generate your theme colors using AI.
      1. Upload your brand image.
        Supported formats are JPEG, JPG, PNG, and SVG with a maximum size of 1 MB.Theme Creation wizard showing a brand image uploaded to generate a color palette using AI.
      2. Select Generate Palette.
      3. Review the AI‑generated primary and secondary colors, then use the simplified preview to see where the colors appear in your instance.
      4. Opcional: Modify the palette by selecting either the Primary or Secondary tile and select the add (+) button or choose from the AI-generated supporting colors.
        Nota:
        The AI detects up to eight colors from your image, with the two most dominant pre-selected as the primary and secondary. Any additional detected colors are suggested as available options that you can swap in as needed.
        Theme Creation wizard showing primary and secondary colors with a color selector for adjusting the primary palette.
      5. Opcional: Choose a new color from the color selector and select Apply.
      6. Opcional: Select back to return and choose a different image or to handpick your colors.
      7. Select Next.
    6. If you selected Handpick my colors, define your theme colors manually.
      1. Select the Primary tile and choose your brand’s primary color from the color selector or enter a value using HEX, RGB, or HSL.
        Figura 3. Your brand's primary color
        Your brand's primary color
      2. After you identify the primary color of your brand, select Apply.
      3. Select the Secondary tile and choose your brand’s secondary color from the color selector.
      4. Select Apply.
      5. Opcional: Select Generate with AI instead to return to the AI-generated palette step.
      6. Select Next.
    7. Upload your brand logo, confirm it appears correctly in the preview, and select Next.
      If you don’t add a logo, the ServiceNow logo is used.
    8. Select the preferred font for your text and select Next.
    9. Select the corner shape of your components in the interface, such as the buttons, modals, and drop-down menus, and select Next.
    10. Review your selections and select Create theme.
      Nota:
      From this screen, you can edit any part of the theme before selecting Create theme. After the theme is created, any changes you make are automatically saved.
      Figura 4. Theme details and final preview before creation
      Final review screen showing theme information, brand colors, and a preview before creating the theme.

    Resultado

    Your theme is saved as a draft in Theme Builder and appears in the Unpublished section of the Manager page.

    O que Fazer Depois

    After creating your theme in the wizard, you are directed to the Editor view of the theme where you can continue modifying or publish your theme.