Themes in Adaptive Forms (Core Components)

You can create and apply themes to stylize an Adaptive Form using core components. A theme contains styling details for the components and panels. Styles include properties such as background colors, state colors, transparency, alignment, and size. When you apply a theme, the specified style reflects on the corresponding components. Theme is managed independently without a reference to an Adaptive Form.

When you create an Adaptive Form using core components, the Out-of-the-Box themes appear under the Style tab. By default, only the Canvas theme is available.


An Adaptive Form theme should not be confused with Adaptive Form templates. Adaptive Form themes only contain the styling information for an Adaptive Form. Adaptive Form templates define form structure and initial content and contain a theme in order to allow for the creation of new Adaptive Form.

Using Canvas theme in Adaptive Forms using core components

Steps to apply theme to an Adaptive Form are:

  1. Log in to your AEM Forms author instance.

  2. Tap Adobe Experience Manager > Forms > Forms & Documents.

  3. Click Create > Adaptive Forms. The wizard for creating Adaptive Form opens.

  4. Select the core component template in the Source tab.


    When you create an Adaptive Form with core components, you see the Canvas theme under the Style tab. This is the only Out-of-the-Box theme available right now. But you can change the theme to your liking and save it for future use by setting up a frontend pipeline.

  5. Select the Canvas theme in the Style tab.

  6. Click Create.

Adaptive Form themes are used as part of an Adaptive Form template to define styling while creating an Adaptive Form.

Customize the theme

To customize a theme,

To customize a Canvas theme:

  1. Clone the Canvas theme
  2. Understand the structure of the theme
  3. Change name in package.json and package_lock.json
  4. Create the .env file in the theme folder
  5. Start the local proxy server
  6. Customize the theme
  7. Commit the changes
  8. Deploy the pipeline

1. Clone the Canvas theme

Open command prompt and run the following command to clone the canvas theme:

git clone


The Style tab of Form Creation Wizard displays the same theme name as in the package.json file.

2. Understand the structure of the theme

An Adaptive Form theme is a package containing the CSS, JavaScript, and static resources that define the styling of your form and complies with the structure of an Adaptive Form theme. An Adaptive Form theme has the following structure typical of a front-end project:

  • src/components: JavaScript & CSS files specific to AEM core components
  • src/resources: Static files like icons, logos, and fonts
  • src/site: JavaScript & CSS files that apply to the entire AEM Sites page
  • src/theme.ts: The main entry point of your JavaScript & CSS theme
  • src\theme.scss: JavaScript & CSS files that apply to the entire theme

The src/components folder has JavaScript and CSS files specific for all AEM core components such as button, checkbox, container, footer etc. You can style button or checkbox by editing the CSS file specific to the AEM component.

Editing the theme

To customize the theme, you can start the local proxy server to see the theme customizations in real time based on actual AEM content.

3. Change name in package.json and package_lock.json of Canvas theme

Update the name and version of Canvas theme in the package.json and package_lock.json files.


Names should not have @aemforms tag. It should be simple text as user-provided name.

Canvas Theme Pic

4. Create the .env file in a theme folder

Create a .env file in the theme folder and add the following parameters:

  • AEM url

  • AEM site name

  • AEM proxy port

Canvas Theme Structure

5. Start a local proxy server

  1. From the command line, navigate to the root of the theme on your local machine.

  2. Execute npm install and npm retrieves dependencies and installs the project.

  3. Execute npm run live and the proxy server starts.

    npm run live

  4. Tap or click SIGN IN LOCALLY (ADMIN TASKS ONLY) and sign in with the proxy user credentials provided to you by the AEM administrator.

    Sign in locally

    • Create a local user to login locally. Provide contributor role for the theme designer.
    • If you specify the AEM URL as http://localhost:[port]/ in the .env file of Canvas theme, you are directly redirected to the browser.
  5. Once signed in, change the URL in the browser to point to the path to the sample content that the AEM administrator provided to you.

    • For example, if the path provided was /content/formname.html?wcmmode=disabled, change the URL to http://localhost:[port]/content/forms/af/formname.html?wcmmode=disabled

    Proxied sample content

Navigate to an Adaptive Form to see Canvas theme applied to an Adaptive Form.

6. Customize the theme

  1. In your editor, open the file <your-theme-sources>/src/site/_variables.scss.


    You can style all the Adaptive Form components in a Site directly by editing the site/_variables.scss file.

  2. Edit the variable for the font colour to red.

    Edit theme

    Style the different AEM components

    You can style the different components of an Adaptive Form by changing its CSS file in editor. There are different CSS folders for each Adaptive Form core component in the Canvas Theme folder.

    Core component

    To specify styles for a specific component in theme editor, you can edit the CSS in a theme folder. For example, if you want to change the border color of a text box field, open the CSS file in editor and change its border color.

    Edit Textbox CSS

  3. When you save the file, the proxy server recognizes the change via the line [Browsersync] File event [change].

    Proxy browsersync

  4. Switching back to your browser of the local proxy server, the change is immediately visible.

    change AF theme

The theme designer previews the changes in the local proxy server and customizes the theme according to the requirements for different AEM components.

Before committing the changes into the AEM Git repository, you need to access your Git repository information.

7. Commit the Changes

After making changes to the theme and testing it with a local proxy server, commit the changes to the Git repository of your AEM Forms Cloud Service. It makes the customized theme available in your Forms Cloud Service environment for Adaptive Forms authors to use.

Before you commit changes to the Git repository of your AEM Forms Cloud Service, you require a clone of the repository on your local machine. To clone the repository:

  1. Create a new theme repository by clicking the Repositories option.

    create new theme repo

  2. Click Add Repository and specify the Repository Name in the Add Repository dialog box. Click Save.

    Add Canvas Theme Repo

  3. Click Copy Repository URL to copy the URL of the created repository.

    Canvas theme URL

  4. Open the command prompt and clone the above created cloud repository.

    git clone
  5. Move the files of theme repository that you are editing into the cloud repository with a command similar to
    cp -r [source-theme-folder]/* [destination-cloud-repo]
    For example, use this command cp -r [C:/cloned-git-canvas/*] [C:/cloned-repo]

  6. In the directory of the cloud repository, commit the theme files that you moved into with the following commands.

    git add .
    git commit -a -m "Adding theme files"
    git push
  7. The customizations are pushed to the Git repository.

    Changes committed

Your customizations are now safely stored in the Git repository.

8. Run the frontend pipeline

  1. Create the front-end pipeline to deploy the customized theme. Learn how to set up a frontline pipeline to deploy customized theme.
  2. Run the created frontend pipeline to deploy customized theme folder under the Style tab of an Adaptive Form creation wizard.

In future if you make any modifications in the Canvas theme folder, you need to rerun the above pipeline again. Hence, it is necessary to remember the name of the pipeline.

Example to customize the theme

  1. Log in to your AEM Forms author instance.
  2. Open an Adaptive Form created using core components.
  3. Start the local proxy server using the command prompt and click SIGN IN LOCALLY (ADMIN TASKS ONLY).
  4. Once signed in, you are redirected to the browser and see the applied theme.
  5. Download the Canvas theme and extract the downloaded zip folder.
  6. Open the extracted zip folder in your preferred editor.
  7. Create a .env file in the theme folder and add parameters: AEM URL, AEM_ADAPTIVE_FORM and AEM_PROXY_PORT.
  8. Open the CSS file of the textbox in the Canvas theme folder and change its border color to say red color and save the changes.
  9. Reopen the browser again and you see the changes are reflected immediately in an Adaptive Form.
  10. Move the canvas theme folder in your cloned repository.
  11. Commit the changes and run the fronend pipeline.

Once the pipeline is executed, the theme is available under the Style tab.

Best practices

  • Avoiding assets from another theme

    When you edit a theme, you can browse and add assets (such as images) from other themes. For example, you are editing the background of a page. For example, when you select Page edit-button> Background > Add > Image, you see a dialog that lets you browse and add images in other theme.

    You can face issues with your current theme if an asset is added from another theme, and the other theme is moved or deleted. It is recommended that you avoid browsing and adding assets from other themes.

  • Changing container panel layout width

    Changing container panel layout width is not recommended. When you specify width of a container panel, it becomes static and does not adapt to different displays.

  • Using form editor or theme editor for working with header and footer

    Use theme editor if you want to style header and footer using styling options such as font style, background, and transparency.
    If you want to provide information such as a logo image, company name in header, and copyright information in the footer, use the form editor options.

On this page