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

Question

Now vaadin 7.3 has come out and it has a very nice Valo theme . But I don’t know how to import it into my project? Now I am using the default theme with my special scss files. I would like to try Valo . Please help me how to import valo theme into my project.

Moreover, how can I choose theme styles? The demo version of Valo Theme has various theme styles, such as Default, Blueprint, Dark, Metro, Flat. How to choose these categories as you wish?

Answer 1

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

there is a whole section dedicated to Valo

the various topics at the top of Valo, as shown in valo-demo , are done with the basic SASS variables discussed in the book.

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

Answer 2

In addition to the accepted answer, you can specify a theme using the @Theme annotation in your user interface and expand the theme by creating a folder with the name of your theme in the VAADIN\themes section.

Inside this folder you must create styles.scss and .scss:

styles.scss

 @import "licensing.scss"; .licensing { @include licensing; } 

licensing.scss

 @import "../valo/valo.scss"; @mixin licensing { @include valo; } 

Thematic annotation: Example for github .

Theme Files: An example of a theme folder .