Site Themes site-themes
Learn how AEM site themes can be used to customize the style and design of your site.
Overview 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.
Using Site Themes using-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.
Site Theme Structure structure
Site themes are simply packages with a logical structure that clearly reflects the purpose of the package content. For a typical front-end project, Adobe recommends the following structure for a site theme:
src/theme.ts: The main entry point of your JS & CSS themesrc/site: JS & CSS files that apply to the entire sitesrc/components: JS & CSS files specific to AEM componentssrc/resources: Static files like icons, logos, and fonts
Depending on specific project needs, your theme structure may vary as long the main entry point, src/theme.ts, is preserved.
Standard Site Theme 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 developing-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.