Implementing Themes

A site's theme defines its visual identity and includes typography, colors, spacing, and more. Historically, themes were built as plugins that tightly coupled styling to the platform core. Today, Liferay provides frontend client extensions that deliver the same visual control with far less maintenance overhead.

In this lesson, you'll learn the tradeoffs of traditional theme plugin development and see why client extensions are now the recommended approach for implementing themes.

Developing Theme Plugins

Theme plugins give developers control over all aspects of the portal presentation. They combine HTML, CSS, JavaScript, and FreeMarker into a Web Archive (WAR) file that you deploy to your Liferay instance. To support theme plugin development, Liferay provides theme templates, Clay CSS resources, and extension points for granular modifications. These themes are highly configurable, but the same characteristics that make them powerful also make them difficult to maintain.

Plugins are bulky and carry significant overhead. Even small customizations often require building a complete theme, most of which is boilerplate. Development is slow, costly, and, because plugins often override platform classes and templates, it complicates Liferay upgrades. Every version bump may require you to update your themes to fix broken or outdated references.

This tight coupling is also why theme plugins are incompatible with Liferay SaaS. While plugins still work with PaaS and self-hosted deployments, they are no longer the recommended approach. Use frontend client extensions with Liferay's other native design elements whenever possible.

Customizing Styles with Client Extensions

Frontend client extensions provide a modern, streamlined way to customize themes and style websites. Because client extensions are deployed outside of Liferay, they simplify maintenance and protect both the platform and your extensions during upgrades. They are also compatible with every Liferay deployment type.

Two frontend client extensions are particularly relevant to theme implementation: the theme CSS client extension and the global CSS client extension.

Theme CSS Client Extension

The theme CSS client extension offers much of the same functionality as a theme plugin, without the drawbacks. With it, you can replace all the styling of a site with custom settings. Keep in mind that when you replace a theme, you must include any existing styling you want to keep. So even though you benefit from the modern client extension approach, fully overriding a theme remains a complex and resource-intensive process. Use the theme CSS client extension when you need to completely redefine your site's theme.

Liferay recommends limiting how often you replace or overhaul an entire theme. A better use of the theme CSS client extension is creating frontend token definitions. Frontend tokens represent styling rules that you can configure with style books. Each token corresponds to a CSS variable, and the full collection is called a frontend token definition.

Global CSS Client Extension

With the global CSS client extension, you can add and modify styling across your site without overriding the full theme. Because it's not tied directly to the theme, it's more versatile. You can make one-off styling changes or modify specific parts of the platform without touching anything else. This flexibility makes the global CSS client extension the first choice for most styling customizations in Liferay.

You can also use theme and global css extensions together. Establish foundational styling and structure with the theme CSS client extension, then use the global CSS client extension to tailor specific sections or elements.

When you work with the global CSS client extension, modify the existing CSS class variables that Liferay provides out of the box whenever possible. This reduces maintenance and encourages reuse. If Liferay's existing variables don't meet your design needs, use the theme CSS client extension to create a frontend token definition with new custom variables.

Conclusion

Frontend client extensions resolve the core challenges of plugin-based theming while preserving the rich functionality and granular control developers need. This course covers the theme CSS and global CSS client extensions in the context of site styling. To explore the full breadth of client extension types, see the Foundations of Liferay Client Extensions and Mastering Liferay Frontend Client Extensions courses.

Next, you'll help Clarity customize their site styling by adding a frontend token definition.