Time for action – creating a new Vaadin theme

Follow these steps to create a new Vaadin theme:

1. Open the themes example application on your IDE.

2. Create a new VAADIN/themes/cool/ folder besides your WEB-INF folder:

   

3. Create a new file styles.scss in the newly created directory and let your fingers type this into the new file:

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

4. Create a new file cool.scss in the newly created directory and allow your fingers to type this into the new file:

   @import "../chameleon/chameleon.scss";
   
   @mixin cool {
     @include chameleon;
   }

5. Use the theme in ThemesUI:

   @Theme("cool")
   public class ThemesUI extends UI {
   
     // ...
   
   }

6. Run the application and make sure that it's using the chameleon theme.

What just happened?

We've just created a new theme with the name cool. Configuring @Theme("cool") will make Vaadin search for a cool directory inside VAADIN/themes/. More precisely, Vaadin will load the file VAADIN/themes/cool/styles.scss.

The first line of syles.scss imports another file...