Vaadin 7 UI Design By Example Beginner's Guide

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 ...