Flow with Material theme

Does anyone know if the Vaadin Components Material theme at https://cdn.vaadin.com/vaadin-material-theme/0.4.0/demo/customization.html
works in Flow. Can this be used for Java defined components?

I think you should be able to install the vaadin-material-theme package as a webjar, and then define a new Theme class which resolves component URLs there.

The [general component theming documentation]
(https://vaadin.com/docs/v10/flow/theme/using-component-themes.html) might offer some help, and the [Lumo.class implementation]
(https://github.com/vaadin/flow/blob/master/flow-theme-integrations/lumo/src/main/java/com/vaadin/flow/theme/lumo/Lumo.java).

For Vaadin 11 we will provide a theme package and the component integrations that have the Material Theme as an option for Lumo. Vaadin 11 will be released in beginning of September.

Hello Pekka. Thanks for the update. Does that also mean that the above linked Material theme will NOT work?

Hi Franz. I think it should work, but unfortunately I cannot guarantee that. I think it depends on how the component theme files are available in the material theme artifact, and whether you’re able to import them when needed. Eg. when using the Button component, you’ll need to import the raw version of the web component (without theme), and then the corresponding material theming resources. And now those are inside the material theme artifact, instead of the component artifact. Jouni might be able to say what needs to be imported to get the material theming applied to the web components.

For V11 we will use new versions of the components that have the material theme resources inside the component webjar, there is already alpha versions of the web components available. Thus the dependency import is really simple with src/theme/material.

So if you really want to use material theme, you could consider into jumping into the V11 release train as soon as we release the first alpha for it with material theme support. Compared to V10 you won’t get LTS support, but you will be getting all the new features. And you won’t spend time now on trying ot make your own material theme integration.

Importing webJar and defining a Theme class does not seem to work completely.

In pom.xml, material webjar can be included as
<dependency> <groupId>org.webjars.bowergithub.vaadin</groupId> <artifactId>vaadin-material-styles</artifactId> <version>1.2.0</version> </dependency>

Similar to Lumo.class, a MaterialWrapper class can be defined, with @HtmlImport and getHeaderInlineContents() reflecting what is defined in Step 2 “Import and include main style modules” documented in https://cdn.vaadin.com/vaadin-material-styles/1.2.0/demo/. @Theme(MaterialWrapper.class) is also added to MainView in the v10 tutorial project (https://vaadin.com/docs/flow/introduction/tutorial-get-started-first-part.html)

After doing the above, only the font in tutorial app seems to reflect material style. The buttons, fields, and grid do not reflect the material style. They all look like plain text. Are there any other steps that need to be done?

For lumo style, Vaadin Components have the themed version: e.g. frontend/bower_components/vaadin-button/theme/lumo/vaadin-button. For material style, there is no such themed version exist (e.g. /frontend/bower_components/vaadin-button/theme/materail/vaadin-button.html). Is this the reason why material style is not applied to the components?

After trying V10 and V12, it looks like that material theme works out of box only with V12, as tracked in https://github.com/vaadin/flow-and-components-documentation/issues/368. In https://vaadin.com/docs/v10/flow/theme/using-component-themes.html, it is mentioned that “There is another theme being built, Material Theme. Once it is ready enough, a Flow integration will be available. Even though it will not be part of Vaadin 10, you should be able to use it with all Vaadin 10 components. You can take a look at it and start using it already by manually importing the webjar and the dependencies. See the Material Theme documentation for more information and tracking progress.” Is there a way to get material theme working in V10?