Creating new theme

Hi… I want to set the same font for all my components in my app.

So, I created a new
directory in my webapp.
In fact to be sure, I put it inside directly inside the vaadin-themes-7.3.7.jar file (into VAADIN\themes)

Inside VAADIN\themes\mytheme, I created a brand new
file with

@import “…/valo/styles.css”;
.v-app {font-size: 32px; }

In my code, I added


But it doesn’t work, I have “ugly stuff” on screen. I do not even get the valo rendering.

What do I have forgotten ?

Valo has been built with Sass, while Reindeer, Runo and Chameleon is built with CSS. Sass brought some restrictments and basically if you’d like to modfiy Valo, you would have to use sass as well. Your example would probably work with renaming your .css to .scss and changing the content to

@import "../valo/valo"; .mytheme { @include valo; // your rules here } Sass support variables. I’m not sure if it is enought to specify $v-font-size: 32px; within .mytheme to put in in place in all places and let it cascade (scaled) to other components as well. Check
for more info