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

Changing the favIcon is as simple as this:

@MateuUI(path = "", favIcon = "https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg")
public class MyUI {

}

You can also place the icon inside the classpath, in the /VAADIN folder and use relative paths like this: images/html5.svg. In this case the java code would be like this:

@MateuUI(path = "", favIcon = "images/html5.svg")
public class MyUI {

}

Header image

Changing the favIcon is as simple as this:

@MateuUI(path = "", logo = "https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg")
public class MyUI {

}

You can also place the icon inside the classpath, in the /VAADIN folder and use relative paths like this: images/html5.svg.

Header background color

For changing the header background color (or any css style, indeed) you only have to add your own css in this way:

@MateuUI(path = "", stylesheets = "estilo.css")
public class MyUI {

}

And place your css file in the classpath, in the folder /VAADIN. An example /VAADIN/estilo.css for changing the header background color could be like this:

body .mateu .maincomponent .mateu-header {
    background-color: green;
}