Theme development: Choosing your parent

One of the first things I did with Liferay (years back) was the development of a custom theme. Support for this in the Plugins SDK works really smooth and theme development is well documented.

One of the cool features of the themes-builder in Liferay's Plugins-SDK is the "theme.parent" option, determining what "parent" theme you want to build upon.

The well known feature

In build.xml, you can determine what you want to use as a basis for your theme. Liferay comes with three themes, two of which are recommended for building custom themes: "_styled" and "_unstyled". Let's take a look at the default build.xml that's generated for each of your themes:

<?xml version="1.0"?>
   <project name="demo-theme" basedir="." default="deploy">
   <import file="../build-common-theme.xml" />
   <property name="theme.parent" value="_styled" />
</project>

To change the predefined theme content to what's considered a bare minimum, just change from "_styled" to "_unstyled" here.

Some older documentations have also mentioned that you can use "classic" here, which would build your theme on top of Liferay's default theme. However, as this theme may change without notice (as it did from 5.2 to 6.0), it's not recommended to build on top of this, even though it's technically possible.

The not-quite-so-well known feature

There's one more - less widely known - family of options for the "theme.parent" value: You can name any custom theme from your plugins-sdk: If you have created a company-specific theme, handling all your CI, but you want to add some variations in separate themes, just address your own company theme as the parent of a division theme. Use the relative path name for the theme you want to use as parent:

<?xml version="1.0"?>
<project name="my-division-theme" basedir="." default="deploy">
   <import file="../build-common-theme.xml" />
   <property name="theme.parent" value="../my-company-ci-theme" />
</project>

This way all your _diff content specifies differences from the company CI theme and you just need to specify your division specific content - e.g. some icons, footers, combined navigation, colors etc. Usually the company-theme is based on _styled or _unstyled, so that you get all the default stuff as well.

Of course this leads to some additional caution regarding how themes are created: Liferay's best practice asks you to modify a theme's css - if possible - only in custom.css. If you do this in both of your themes, these changes would override each other. To get back to best practices for most of your themes, you can have your company-theme modifications in a separate css file and include that from that theme's main.css:

/* This is the main CSS that includes other CSS files. */
@import url(base.css);
@import url(application.css);
@import url(layout.css);
@import url(dockbar.css);
@import url(navigation.css);
@import url(portlet.css);
@import url(forms.css);
@import url(my-company.css);
@import url(custom.css);

This keeps the default best-practice in place for most of the themes you create (the division-specific ones) but adopts the required changes for the one company specific theme.

In contrast to using color schemes - which could be used for the same effect - this is using completely separate themes, so they can be deployed (and maintained) independent of each other.

Blogs
Actually, Liferay maven sdk has similar kind of support. You can get your favorite theme from repository and use that as a base.
Hi Sampsa, can you give an example of this?, I am trying to create a theme with welcome-theme as parent but i dont seem to get it right. TY
According to https://dev.liferay.com/develop/tutorials/-/knowledge_base/6-2/developing-liferay-theme-plugins-with-maven :
You can define almost any WAR artifact as the parent using the syntax groupId:artifactId:version