Easy theming with Valo

I’m not a front-end designer and that’s the main reason why I love Vaadin. The framework lets you create professionally looking applications with no front-end skills. However, let’s face it: to create your own theme is not really easy (as a reminder, please check this previous post and this one), and the Vaadin team even recommends to use an existing theme and tweak it..

Contrary to other themes and thanks to the power of Syntactically Awesome Style Sheets, Valo offers plenty of specific hooks in the form of functions and mixins to create new themes in a very easy way.

Those can be categorized into the following settings:

• General: general settings cover background color and line height
• Font: font settings govern… font, including size, weight, color and family
• Layout: layout settings configure the spacing and margin. It is finally possible to easily manage those parameters beside layout.setMargin() and layout.setSpacing()!
• Component: component settings are realted to focus, border, shadow, gradient, etc.
• Compilation and optimization: thos settings can tweak the compilation process

Valo is really well documented, but here’s a small example of a custom styles.scss file for a so-called custom theme located under ${webroot}/VAADIN/themes/custom/styles.scss:

// General Settings
$v-app-loading-text: "Loading app, please wait...";
$v-background-color: #0ea5d7;
$v-app-background-color: lighten($v-background-color, 80%);

// Font Settings
$v-font-color: #464440;
$v-font-size: 14px;
$v-font-family: Helvetica, sans-serif;

// Component Features
$v-border-radius: 0px;
$v-border: 2px solid v-tone;
$v-gradient: v-linear 20%;
$v-focus-style: 0 0 0 1px v-tint;

@import "../valo/valo";

Valo comes with a bunch of documentation and resources, including:

• The Book of Vaadin has a dedicated chapter dedicated to the Valo theme
• The SASS documentation generated by the .scss file
• Finally, this Github sub-project uses the above snippet to display some components