ÃÛ¶¹ÊÓƵ

DocumentationAEM as a Cloud ServiceUser Guide

Site Themes site-themes

Last update: Thu Aug 29 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • Admin

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.

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, and contain an AEM site theme to allow for quick site creation.

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.
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 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, ÃÛ¶¹ÊÓƵ recommends the following structure for a site theme:

  • src/theme.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

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

ÃÛ¶¹ÊÓƵ provides a best-practices reference theme that you can use as a basis for creating your own theme. .

Developing Site Themes developing-themes

ÃÛ¶¹ÊÓƵ provides an AEM Site Theme Builder as a set of scripts for creating new site themes.

. Front-end development experience is required for customizing the theme.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab