Can't apply own custom theme without breaking everything

Flow
1

Hello.

I want to do some minor styling in to my app and so I tried to create a custom theme. I’m using IntelliJ Idea as an IDE for this project.

I’ve set my theme in folder: web/VAADIN/themes/mytheme/styles.css
I’ve also copied valo theme from jar to themes folder ( not sure if needed )

I’ve following css-code in mytheme/styles.css file:

@import "../valo/styles.css";

.blackColor {
background: black;
}

In my UI, I’ve tried to use setTheme(“mytheme”); in init method and annotation before the class.

The result is, I can apply the .blackColor just fine to components but it completely forgets the valo theme. It’s like my custom theme is the only css file that is in use. What should I do?

2

Don’t use CSS directly, I recommend creating your own SASS theme based on Valo. SASS is basically a “better version” of CSS, which allows you to use variables, functions etc. SASS files are then compiled into normal CSS. You shouldn’t modify the CSS manually.

Read the section about
Valo Theme
 in the Book of Vaadin. The first example in the chapter shows you how to create your own Valo based SASS theme and how to modify the background color of the whole application. The nice thing with Valo parameters is, that if you change, for example, the background color, it’s not the only thing that changes, but other colors also change so that they are compatible with the chosen background color (e.g. get enough contrast).

Check out the
SASS doc for Valo
, to see what kind of APIs Valo provides.

3

I am also attemting to use Vaadin in IntelliJ IDEA 14. When i try to use a custom theme, it does not work at all. What has to be done to get the themes to compile correctly? There is no .css file created in war package when I deploy the server . I dont have direct acess to the internet, so am not using Maven. I am new to Vaadin, any information would be helpfull.