How to create different Themes on top of Valo in Vaadin?

Question

Now vaadin 7.3 has came out and it has the very nice Valo Theme . But I don't know how to import it to my project? Now I am using a default theme with my custom scss files. I would like to taste Valo . Please somebody help me how to import valo theme to my project.

More over, how can I choose theme styles? Valo Theme Demo has different theme styles such as Default, Blueprint, Dark, Metro, Flat. How to choose this categories as I wish?

Answer 1

Further to the accepted answer, you can specify the theme using the @Theme annotation on your UI class and extend the theme by creating a folder with the name of your theme under VAADIN\themes.

Inside that folder you'd create a styles.scss and .scss:

styles.scss

@import "licensing.scss";

.licensing {
  @include licensing;
}

licensing.scss

@import "../valo/valo.scss";

@mixin licensing {
  @include valo;
}

Theme annotation: Example on github.

Theme files: Example theme folder.