Creating new theme

Flow
1

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

So, I created a new
mytheme
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
styles.css
 file with


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

In my code, I added

setTheme(“mytheme”);

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

What do I have forgotten ?

2

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
https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.use
 for more info