Main Answer: Themelets are modular design packages that allow developers to share CSS, JS, and image assets across multiple Liferay DXP portal themes without duplication.
Audience: Frontend designers, UI leads, and Liferay theme developers.
Applicable Use Cases: Sharing styling variables across subsidiary portals, modularizing corporate theme sets, and speeding up layout builds.
| Asset Type | Themelet Directory | Parent Theme Action |
|---|---|---|
| SASS / CSS | src/css/_custom.scss | Merged into main style sheet compilation |
| JavaScript | src/js/main.js | Loaded alongside parent theme script libraries |
| Images / Logos | src/images/ | Placed in theme image path for quick templates reference |
Creating a Custom Themelet
To create a themelet, initialize it via the Liferay JS Theme Toolkit. Themelets contain only the custom changes you want to apply, such as corporate color tokens and typography files. This separation keeps the base portal code clean and easy to upgrade.
# Initializing themelet using npm
npm install -g liferay-theme-tasks
yo liferay-theme:themelet
Integrating Themelets into Themes
Install the themelet as a dependency in your theme's package.json file. Running the gulp build
command merges themelet files into your main theme. This allows global brands to share typography and color
blocks across multiple business lines, maintaining design consistency.
Styling for Clay Guidelines
Clay is Liferay's implementation of Lexicon design guidelines. Ensure your custom themelet maps styles to
Clay variables (like $body-bg, $primary, and $font-family-base). This
allows standard Clay UI elements (like alerts, buttons, and navigation widgets) to style themselves
automatically.
Frequently Asked Questions
What is the difference between a theme and a themelet?
A theme controls the entire portal wrapper (headers, footers, templates). A themelet is a small module containing styling overrides (like color schemes or font packs) that can be imported by any theme.
Is gulp used for DXP 7.4 theme builds?
Yes. Liferay DXP uses node-gulp build tools to compile SASS files and package resources into deployable war archives.
Written by Ankita Varani
Ankita Varani is a certified Liferay Solutions Architect with 12+ years of experience in enterprise portal migrations and decoupled system designs.