Installation

1. Update your pom.xml

<dependency>
  <groupId>com.github.appreciated</groupId>
  <artifactId>material</artifactId>
  <version>1.1.5</version>
</dependency>

1.5 Optional - Only if you are planning to work with the Vaadin Designer (1/2)

2. Install the dependency by running a Maven goal (this step differs depending on the IDE you use)

Console

mvn install

3. Edit your Theme SCSS file

located at <Project Path>/src/main/webapp/VAADIN/themes/<mytheme>/<mytheme>.scss)

Note: You can remove the Valo import since the Material Theme includes it anyways

$mat-background-color: #fafafa; // #fafafa for a light and #303030 for a dark theme
$v-focus-color: #00BCD4; 
// (You can find colors at materialpalette.com) $v-focus-color is supposed to be your accent color
@import "../material/material.scss"; 

@mixin mytheme {
  @include material;
  // Insert your own theme rules here
}

4. Compile the theme by running a maven goal / using a IDE Plugin

Console

mvn vaadin:compile-theme

5. Redeploy/Restart your Vaadin Application if it was running before

6. Clear your Browser cache before loading the Vaadin Application