Themes

Mateu UIs are in fact simple Vaadin UIs, so the same theme mechanism of Vaadin can be applied to Mateu. If you want to overwrite the default styles of your Mateu UI, just create a project with your own theme, extending Mateu's theme, and use it by stating it at the @MateuUIannotation:

@MateuUI(path = "", theme="myTheme")
public class MyUI extends MateuUI {

    @Home
    public String msg = "Hello world";

}

You just need to take into account that your theem should extend the mateu theme, unless you want to view strange things ;)

@import "../mateu/mateu.scss";

@mixin myTheme {
  @include mateu;

  // Insert your own theme rules here

}

You can find a complete explanation of Vaadin Themes here.

Mateu theme simply extends the Vaadin Valo theme, so all of the variables and configuration that you can use with the Valo theme can also be used inside your theme.

Typical customizations

There are some things you would surely want to customize, when creating your Mateu UIs. Let's check them.

Favicon

Header image

Header background color