“Web development teams use Sitecore Experience Accelerator (SXA) to speed up the production of websites and to reuse components, layouts, and templates across a variety of sites.”

The Sitecore SXA themes system plays an important role in the power of SXA. An SXA theme can be about the styling of your web site, but it is also a mechanism to deliver pieces of functionality. Sitecore SXA comes with a large collection of base themes for functionality like maps, search and analytics. There are also base themes that are specific to support for example the editing of components in the Experience Editor.

Reading the source code of themes is a great way to learn how Sitecore itself is building components, and what libraries are included by default when working with SXA.

The problem is: clicking through the themes in the Sitecore Content Editor (/sitecore/media library/Base Themes and /sitecore/media library/Themes) don’t reveal much because you can’t see the code in the files and you have to guess the file extension by looking at the icon.

Exporting a theme with its base themes using Creative Exchange

The best way to get your hands on the code is by creating a SXA site for example CreativeExchangeExport on the Virtual folder /CreativeExchangeExport, on the select all modules, select the “Create a new theme” checkbox and name your new theme CreativeExchangeExportTheme, and selecting for example the Bootstrap 4 grid system. (Note that if you forgot to set the Virtual folder, you can go to the item /sitecore/content/SergeTenant/CreativeExchangeExport/Settings/Site Grouping/CreativeExchangeExport to set Virtual Folder to /CreativeExchangeExport, other nice thing to set is the Database to master so you don’t have to publish on your developer box).

Now right-click of the Home item in the Sitecore Content Editor and select Experience Editor and select the EXPERIENCE ACCELERATOR tab.

First press the Theme button in the top bar and select for Default the new created CreativeExchangeExportTheme. Now move over to the Creative Exchange section and select Export. Keep the default settings to export the whole site as an Agency drop to a zip file.

In the File Explorer right-click on the zip file, select Properties and select the Unblock checkbox.

Unzip this file to a location to keep as reference, open the root folder in Visual Studio Code and start exploring!

Note that an export of the Wireframe theme is interesting to investigate as well!

How themes build on each other

If you select Preview on the Home page in the Experience Editor, do a right-click and select View page source you will see what happens.

The head contains the css files loaded in the following order:

/-/media/Feature/Experience-Accelerator/Bootstrap-4/Bootstrap-4/Styles/optimized-min.css
/-/media/Base-Themes/Core-Libraries/styles/optimized-min.css/-/media/Base-Themes/Main-Theme/styles/optimized-min.css
/-/media/Themes/SergeTenant/CreativeExchangeExport/CreativeExchangeExportTheme/styles/pre-optimized-min.css 

At the end of the body the following js files are loaded in the following order:

/-/media/Base-Themes/Core-Libraries/scripts/optimized-min.js
/-/media/Base-Themes/XA-API/Scripts/optimized-min.js
/-/media/Base-Themes/Main-Theme/scripts/optimized-min.js
/-/media/Base-Themes/Google-Maps-JS-Connector/Scripts/optimized-min.js
/-/media/Base-Themes/Maps/Scripts/optimized-min.js
/-/media/Base-Themes/SearchTheme/Scripts/optimized-min.js
/-/media/Base-Themes/Components-Theme/Scripts/optimized-min.js
/-/media/Base-Themes/Resolve-Conflicts/Scripts/optimized-min.js

Note that there is css file pre-optimized-min.css for your new created theme, but no js file pre-optimized-min.js. This file will appear when you add JavaScript files to your theme in the scripts folder.

Sitecore uses a mechanism called Asset Optimizer to combine all JavaScript files in the scripts folder into an optimized and minified file.

From the Asset Optimzer documentation page:

Add aodisable=1 to the query string to turn off asset optimization for a request. For some SXA versions, to be able to use aodisable=1, you might have to enable the XA.Foundation.Theming.AssetsOptimizationSwitch.Enabled setting in the Sitecore.XA.Foundation.Theming.config file.

On my system this file is located at C:\inetpub\wwwroot\sergesc.dev.local\App_Config\Modules\SXA\Foundation\Sitecore.XA.Foundation.Theming.config, and toggling this switch on your developer box is a great thing to do to get more insights in what scripts are loaded.

I could not get it working so I disabled the Asset Optimizer completely on my developer box by setting at /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser the Mode for both Scripts and Styles to Disabled.

Now navigate to the homepage of your website in an incognito browser window so no Experience Editor files are loaded (view-source:https://sergesc.dev.local/CreativeExchangeExport).

This results in the loading of the following CSS files:

/sitecore/shell/-/media/Feature/Experience-Accelerator/Bootstrap-4/Bootstrap-4/Styles/bootstrap-grid.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/mediaelementplayer.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/mediaelementplayer-legacy.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/font-awesomemin.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/fullcalendar.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/jquerymCustomScrollbar.css
/sitecore/shell/-/media/Base-Themes/Core-Libraries/styles/jquery-ui.css
/sitecore/shell/-/media/Base-Themes/Main-Theme/styles/author.css
/sitecore/shell/-/media/Base-Themes/Main-Theme/styles/core.css
/sitecore/shell/-/media/Base-Themes/Main-Theme/styles/file-type-icons.css
/sitecore/shell/-/media/Base-Themes/Main-Theme/styles/grayscale-mode.css
/sitecore/shell/-/media/Base-Themes/Main-Theme/styles/reset.css
/sitecore/shell/-/media/Themes/SergeTenant/CreativeExchangeExport/CreativeExchangeExportTheme/styles/pre-optimized-min.css

and the following JavaScript files (I removed the /creativeexchangeexport/-/media/Base-Themes/ prefix):

Core-Libraries/scripts/ie-origin-fix.js
Core-Libraries/scripts/xaquery.js
Core-Libraries/scripts/moment.js
Core-Libraries/scripts/lo-dash.js
Core-Libraries/scripts/modernizr.js
Core-Libraries/scripts/galleria-157.js
Core-Libraries/scripts/fullcalendar.js
Core-Libraries/scripts/gcal.js
Core-Libraries/scripts/jqueryuitouch-punchmin.js
Core-Libraries/scripts/hammer.js
Core-Libraries/scripts/backbone-min.js
Core-Libraries/scripts/typeahead.js
Core-Libraries/scripts/jquerymCustomScrollbar.js
Core-Libraries/scripts/flash-polyfill.js
Core-Libraries/scripts/mediaelement-and-player.js
Core-Libraries/scripts/dailymotion.js
Core-Libraries/scripts/facebook.js
Core-Libraries/scripts/soundcloud.js
Core-Libraries/scripts/twitch.js
Core-Libraries/scripts/vimeo.js
XA-API/Scripts/xa.js
Main-Theme/scripts/observer.js
Main-Theme/scripts/partial-design-highlight.js
Google-Maps-JS-Connector/Scripts/google-maps-connector.js
Maps/Scripts/component-location-service.js
Maps/Scripts/component-map.js
SearchTheme/Scripts/component-location-service.js
SearchTheme/Scripts/component-search.js
SearchTheme/Scripts/component-search-ajax.js
SearchTheme/Scripts/component-search-base-model.js
SearchTheme/Scripts/component-search-base-view.js
SearchTheme/Scripts/component-search-box.js
SearchTheme/Scripts/component-search-facet-data.js
SearchTheme/Scripts/component-search-facet-summary.js
SearchTheme/Scripts/component-search-facet-dropdown.js
SearchTheme/Scripts/component-search-facet-managed-range.js
SearchTheme/Scripts/component-search-facet-range-slider.js
SearchTheme/Scripts/component-search-facet-slider.js
SearchTheme/Scripts/component-search-load-more.js
SearchTheme/Scripts/component-search-location-filter.js
SearchTheme/Scripts/component-search-page-selector.js
SearchTheme/Scripts/component-search-page-size.js
SearchTheme/Scripts/component-search-parameters.js
SearchTheme/Scripts/component-search-query.js
SearchTheme/Scripts/component-search-radius-filter.js
SearchTheme/Scripts/component-search-results.js
SearchTheme/Scripts/component-search-results-count.js
SearchTheme/Scripts/component-search-results-filter.js
SearchTheme/Scripts/component-search-sort.js
SearchTheme/Scripts/component-search-url.js
SearchTheme/Scripts/component-search-variant-filter.js
SearchTheme/Scripts/component-search-service.js
SearchTheme/Scripts/component-search-router.js
SearchTheme/Scripts/component-search-facet-daterange.js
Components-Theme/Scripts/accessibility.js
Components-Theme/Scripts/component-accordions.js
Components-Theme/Scripts/component-archive.js
Components-Theme/Scripts/component-breadcrumb.js
Components-Theme/Scripts/component-carousel.js
Components-Theme/Scripts/component-container.js
Components-Theme/Scripts/component-disqus.js
Components-Theme/Scripts/component-facebook.js
Components-Theme/Scripts/component-flash.js
Components-Theme/Scripts/component-flip.js
Components-Theme/Scripts/component-fullcalendar.js
Components-Theme/Scripts/component-galleria.js
Components-Theme/Scripts/component-language-selector.js
Components-Theme/Scripts/component-navigation.js
Components-Theme/Scripts/component-overlay.js
Components-Theme/Scripts/component-snippet.js
Components-Theme/Scripts/component-social.js
Components-Theme/Scripts/component-tabs.js
Components-Theme/Scripts/component-toggle.js
Components-Theme/Scripts/component-video.js
Components-Theme/Scripts/component-video-playlist.js
Components-Theme/Scripts/details-polyfill.js
Components-Theme/Scripts/fixheight.js
Components-Theme/Scripts/search-fixheight.js
Resolve-Conflicts/Scripts/resolveconflicts.js

Some further investigations reveals that the file xaquery.js contains jQuery version 3.1.1. Also interesting is that libraries like knockout, moment (version 2.20.1) and lodash (version 1.8.3) are available, amongst many others.

Happy hunting!

Personal blog by Serge van den Oever - als je maar lol hebt...
X: @svdoever
LinkedIn: Serge van den Oever - articles on LinkedIn
GitHub: svdoever

Technology Consultant @ Macaw
2021-2024 Sitecore Technology MVP