How to change Vaadin Valo Theme to Metro?

Question

I'm trying to change Valo theme from Default to Metro. In the demo page(http://demo.vaadin.com/valo-theme/) you can select from different themes for Valo, see top-right corner. I wold like to have Valo based on Metro styles but cant find any function or variable to change it.

I'm need to change the theme for some Liferay portlets we are building on Eclipse.

Answer 1

Digging on the Valo Demo Source code, find that setting a number of values you can change the Scheme or theme for Valo, you can check how they manage there style for Metro on: https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-metro/_variables.scss, if needed thet also have the other themes: https://github.com/vaadin/valo-demo/tree/master/src/main/webapp/VAADIN/themes

This are the variables that they use to change the scheme to 'Metro':

$v-app-loading-text: "Metro Valo"; 
$v-font-family: "Source Sans Pro", sans-serif; 
$v-app-background-color: #fff; 
$v-background-color: #eee; 
$v-focus-color: #0072C6;
$v-focus-style: 0 0 0 1px $v-focus-color;
$valo-menu-background-color: darken($v-focus-color, 10%);
$v-border: 0 solid v-shade;
$v-border-radius: 0px;
$v-bevel: false;
$v-gradient: false;
$v-shadow: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-textfield-border: 1px solid v-shade;
$v-link-text-decoration: none;
$v-overlay-shadow: 0 0 0 2px #000;
$v-overlay-border-width: 2px; // For IE8
$v-window-shadow: $v-overlay-shadow;
$v-selection-overlay-background-color: #fff;
$v-selection-overlay-padding-horizontal: 0;
$v-selection-overlay-padding-vertical: 6px;
$v-panel-border: 2px solid v-shade;

Just import or include this on your theme file.

Answer 2

Changing themes can be done from the java code.

Look at this question in Stackoverflow or directly in the Vaadin Wiki