Site Themes

Learn how AEM site themes can be used to customize the style and design of your site.

Overview

An AEM site theme is a package containing the CSS, JavaScript, and static resources that define the styling of your AEM site and complies with the structure of an AEM site theme.

Sites created with AEM site templates allow for the easy download, customization, and redeployment of the themes.

NOTE

AEM site themes should not be confused with AEM site templates. AEM site themes only contain the styling information for an AEM site. AEM site templates define site structure and initial content as well as contain an AEM site theme in order to allow for quick site creation.

Using Site Themes

Site themes are used in two different ways:

  • They are used as part of a site template to define styling when creating a site.
  • They are downloaded after creating a site based on a site template so a front-end developer can further customize the styling.
TIP

An end-to-end description of the process of creating a site from a template and customizing its theme can be found in the Quick Site Creation Journey.

Site Theme Structure

Site themes are simply packages with a logical structure that clearly reflects the purpose of the package content. A site theme has the following structure typical of a front-end project.

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

Standard Site Theme

Adobe provides a best-practices reference theme that you can use as a basis for creating your own theme. The Standard Site Theme is available on GitHub.

Developing Site Themes

Adobe provides an AEM Site Theme Builder as a set of scripts for creating new site themes.

The AEM Site Theme Builder is available along with usage documentation on GitHub. Front-end development experience is required for customizing the theme.

On this page