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.

Answer 2

read the fine manual: https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.use

there is a whole section dedicated to Valo

the different themes on top of Valo as seen in the valo-demo are all done with the setting of the main SASS variables seen in the book.

e.g. https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-flatdark/_variables.scss