Adapting Valo theme to fit the Liferay 6.2 defaults

The easily customizable, SASS based, Valo theme is one of the largest renewals to Vaadin lately. The vaadin-archetype-liferay-portlet still uses the oldish “liferay” theme, adapted for older versions of Liferay, but you can typically get much more appealing results with your Vaadin based portlets with the new Valo theme.

The customizability of Valo is based on certain parameters that SASS compilation uses to produce the CSS files served for the browser. Most notably there are a couple of “base parameters” that are used to calculate others. For example, if you change the $v-background-color variable to a dark tone, the theme will by default calculate, for example, the base font to be a light color to preserve a proper contrast. Just by modifying this one base color variable you can change the whole color theme of your application.

Valo parameters for Liferay look-alike theme

A Vaadin portlet themed with Valo that is adapted to Liferay 6.2 theme.

Valo, with its defaults, is already a pretty good fit into the default Liferay theme, but there are a couple of things we can tune to make it fit better. Although many Liferay users have their own totally customized themes, let’s look at how we can make a Valo theme variant that mimics the default Liferay 6.2 theme. Based on these tips you can probably fit it into your use cases as well.

  1. Change inheritance. If you created your Vaadin portlet with vaadin-archetype-liferay-portlet Maven archetype, there is already a SASS compilation setup and theme ready for you. The first thing to do is to make it inherit from Valo instead of the old “liferay” theme. Go to “mytheme.scss” file (or whatever your theme name is) and change all occurrences of  “liferay” to “valo”.

  2. Adjust fonts. Valo by default uses the Open Sans font, but we’ll just want to use what is defined by the Liferay theme. Also we’ll want to adjust the font-size to match perfectly with what the Liferay theme does. Add these to the top of your SCSS file:

    • $v-font-family: inherit;

    • $v-font-size: 15px;

  3. Adjust roundness and spacings. The Liferay default theme is actually quite similar to Valo in many areas, but it uses a bit less roundness in its components and a bit less “air” between various components. I used these variables to make the Vaadin part look almost identical with the default Liferay stuff:

    • $v-border-radius: 2px;

    • $v-unit-size: 30px;

    • $v-layout-spacing-horizontal: 15px;

    • $v-layout-spacing-vertical: 15px;

    • $v-layout-margin-right: 10px;

    • $v-layout-margin-left: 10px;

    • $v-layout-margin-top: 20px;

    • $v-layout-margin-bottom: 10px;

  4. Adjust colors. Also, the color theme is out of the box quite close to Valo. Someone with more eye for colors could probably adjust the $v-background-color variable to make it match even better, but I just decided to override the focus color to match with the one used by Liferay. In addition to focus outlines, this color affects some UI elements like the color of  “primary buttons”. Also, I overrided the background color of the “app pane” to be white (light gray by default in Valo).

    • $v-focus-color: #50a2f5;

    • $v-app-background-color: #ffffff;

  5. Some finetuning. At this point we are almost done. For my portlet, I still did two more small fine tunings. The captions in Liferay are no different from other texts, so I removed font-weight declaration defined by Valo. Also, I had to do a small trick to the text field height due to CSS rule collisions: Liferay applies size for all inputs and Vaadin defines the sizes using the “border-box” sizing method. These kind of rules are best placed inside your themes “mixin” part, so that they don’t leak into other Vaadin themes (in case you have two Vaadin portlets with different themes). “Web inspectors” in modern browsers are excellent tools to help define this kind of finetuning.

    • .v-caption  {
         font-weight: inherit;

    • .v-textfield {
         height: 30px !important;

These small variable definitions and special rules already give us a pretty nice fit into existing Liferay 6.2 based portlet themes, but there are probably a lot of small details that could improve the solution. If you want to join the effort, please send your pull requests to the dawn project. I added a “ray” theme to it that currently contains these basic rules. If we can make the “ray” theme more complete, let’s contribute it directly to the Vaadin project to replace the existing outdated “liferay” theme.