The Vaadin 8 framework uses the excellent Valo theme, which can be used out-of-the-box or as the base for a custom theme. The (old school) themes for Vaadin 7 (reindeer, runo and chameleon) are still usable with the vaadin-compability-themes.jar.
During the last couple of weeks (June 2017) some interesting add-ons in the vaadin directory appeared to support Google’s material design language. Material design relies on “flat” card areas and a minimalistic (but professional) layout approach using shadows and animations to show what information is most important. As I am writing this post you can enhance your vaadin projects with
- Material a theme that implements the material design language (based on the Valo theme)
- Material Icons an add-on to use all material icons (by Google)
- Material Design Stepper a component add-on to create a step-by-step process with material design
Material
To use the material theme add-on just include the add-on in your project configuration pom.xml file
com.github.appreciated material 0.9.1 vaadin-addons http://maven.vaadin.com/vaadin-addons
and use the @Theme
annotation with the material theme in the UI class of your application.
@Theme("material") public class MyApplicationUI extends UI { ... }
If you want to create a custom theme based on material create the standard theme structure with a styles.scss file. This file should look like this (“demo” is the name of the custom theme):
$mat-background-color: #fafafa; // #303030 for a dark theme $v-focus-color: #00BCD4; @import "../material/material.scss"; @import "addons.scss"; .demo { @include material; @include addons; }
When creating your own theme based on material you can adjust colors and fonts with lots of variables. An overview of these variables is documented at https://github.com/appreciated/material/wiki/Variables .

Feel free to customize everything to your own needs and take a look at Google’s guide to colors for material design at https://material.io/guidelines/style/color.html#color-color-palette and https://material.io/color .
Material Icons
Google offers a set of icons for their material design language at https://material.io/icons/.You can use these icons with the fitting add-on
org.vaadin.alump materialicons 3.0.1
To create a button with a material design icon use code like
Button button = new Button(MaterialIcons.SENTIMENT_SATISFIED);

Material Design Stepper
To create a stepper component for workflows and “wizards” you can use the material design stepper add-on.
org.vaadin.addons md-stepper 2.1
It can be used to create horizontal and vertical steppers with just a few lines of code:
Step step1 = new Step(true, "Caption", "Description", new Label("Content")); Step step2 = new StepBuilder() .withDefaultActions(true) .withCaption("Caption") .withDescription("Description") .withContent(new Label("Content")) .build(); HorizontalStepper stepper = new HorizontalStepper(Arrays.asList(step1, step2), false); stepper.setSizeFull(); stepper.start();

By using these add-ons you are able to create good looking Vaadin application with the popular material design. Please try out all mentioned add-ons and support the developers for contributing their code to the community.