Editable Template

[JakeCham]

To creates Editable Templates based on a custom Page component. The developer
wants to leverage the Style System within the Editable Templates to allow authors to switch
between the Dark and Light Theme. The Style System dialog is NOT enabled for the site

What should be done to resolve this issue

a. Define Style Definitions using Page Policy dialog Editable Template.
b. Create two new client libraries with a dark and light theme and map them to the Page
component.
c. Set the sling:resourceSuperType property to
core/wcm/components/page/v2/page on the Page component.
d. Create a new dialog for the custom Page components.

Ans should be a ?

[Jvenkat]

Hello @JakeCham 

The correct Ans will be:

a. Define Style Definitions using Page Policy dialog Editable Template.

In AEM, Page Policy dialog allows developers to define various styles for editable templates. These styles are then made available in the UI for authors to select and apply to components. By defining a Dark and a Light Theme style in the Page Policy dialog, authors will be able to switch between the two themes. This solution doesn't require additional client libraries or changes to the Page component, and makes the best use of the Style System.

Thanks,

Venkat

[Madhur-Madan · Accepted solution]

Hi @JakeCham ,

The answer should be B
B. Create two new client libraries with a dark and light theme and map them to the Page component.

Explanation:

• The Style System in AEM allows for the creation of different client libraries (CSS, JavaScript, etc.) to define various styles and themes.
• By creating separate client libraries for the Dark and Light themes and mapping them to the Page component, you allow authors to switch between these themes effectively.
• The client libraries define the visual styles and can be associated with components, allowing authors to select the desired theme within the Editable Template using the Style System.

It's suggested to maintain separate client libraries for distinct themes to ensure the right client library is invoked. If we simply use style systems we need to define the styles for both light and dark mode in the same client library which would mean unnecessary js and css being loaded as both the light and dark theme are present in one single clientlib.
So in order to overcome unnecessary js and css from loading and improving the performance of the page we create different clientlibs for different themes and add the required clientlib using the page policy for template.
If you need light theme use the below

If you need dark theme change it to 'myproject.dark' thus preventing unnecessary js and css from being loaded.

Thanks

[Raja_Reddy]

Correct answer is : B

B.Create two new client libraries with a dark and light theme and map them to the Page component.
https://blog.developer.adobe.com/using-aem-style-system-to-increase-reusability-of-components-8177c5... 

Thanks.