Search code examples
vaadinvaadin7

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


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?


Solution

  • 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