O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:
    Time for action – creating a new Vaadin theme
  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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required