How are themes applied in Adobe AEM?

Question

The Client Library (ClientLib) feature in Adobe AEM (formerly Adobe CQ) makes it easy to include client libraries by category and each library can pull in other libraries through dependencies. However the documentation around "Themes" is a little thin.

This link is about all I can find on the subject. Here is an excerpt of the sample code:

<%-- theme only (theme-js + css) --%>
<cq:includeClientLib theme="cq.collab.calendar, cq.security" />

If this tag were to be used how would CQ determine what Client Libs to pull in? Does it look for a theme property of type String[]?

Or does it look for a certain directory structure in the /etc/designs section?

Or does it take the passed in categories and add theme-js to the end like so?

cq.collab.calendar.theme-js

Or is the theme invoked through the URL? In other words, the word "theme", in this case, is a token that is replaced with a selector from a URL applied theme?

Answer 1

Client Libraries reside in a cq:ClientLibraryFolder folder. This folder has a property called category. In the following example, cq.collab.calendar and cq.security are categories:

<cq:includeClientLib theme="cq.collab.calendar, cq.security" />

When this include is called, it is looking for any cq:ClientLibraryFolder with the category cq.collab.calendar or cq.security assigned to it. Using the theme property adds both the css and javascript of clientLibs residing in the themes folder of the parent ClientLibraryFolder. If you were to view your page source, these would be added to their own css and js files. For example, I created the following structure under the geometrixx clientLibary:

geometrixx
    clientlibs
        themes
            myTheme (clientLibray)
               css.txt
               myCSS.css
               js.txt
               myJS.js

If, you use the theme property with this clientlib you would get a myTheme.css and myTheme.js file showing in your source/network tab.

The themed flag is a way to shut theme inclusion on and off. The following cq:include will include all the css in the clientLibrary, including stuff in the themes directory.

<cq:includeClientLib css="apps.geometrixx-main" />

However, if I add the themed flag and set it to false, anything under the theme directory is excluded:

<cq:includeClientLib css="apps.geometrixx-main" themed="false" />

So in that case, myTheme.css would not show up. One thing to note, is that the themed flag, only works on "pure css and js includes" Categories and theme properties would not work with this.

The answer to this question goes over this a bit: What exactly does currentDesign.writeCssincludes include?