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 ?
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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:
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
Views
Replies
Total Likes
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
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:
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
Views
Replies
Total Likes
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.
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies