Integrating Your Own Component Theme

To create your own component theme to be used with the wrapped Vaadin components you need to create a theme class that informs flow how to translate the base un-themed component html import to use your themed version.

The getBaseUrl should return the part of the htmlImport that can be used to determine if it is an import that could be changed to a theme import. (for Vaadin components that is /src/)

The getThemeUrl should return what the base url part should be changed to to get the correct theme import. (for Vaadin components that /theme/[themeName] is used)

Java

  1. @HtmlImport("frontend://bower_components/vaadin-lumo-styles/color.html")
  2. public class MyTheme implements AbstractTheme {
  3.     @Override
  4.     public String getBaseUrl() {
  5.         return "/src/";
  6.     }
  8.     @Override
  9.     public String getThemeUrl() {
  10.         return "/theme/myTheme/";
  11.     }
  12. }

For more control there is getBodyInlineContents() that returns a collection of html that will be inlined to the BootstrapPage body. For instance, it can be used to add a custom style to have the correct typography:

Java

  1. @Override
  2. public List<String> getHeaderInlineContents() {
  3.     return Collections.singletonList("<custom-style>\n"
  4.             + "    <style include=\"lumo-color lumo-typography\"></style>\n"
  5.             + "</custom-style>");
  6. }

Your theme can also support variants. For instance, Lumo theme supports both light and dark variants. To add support for variants, you can override the getBodyAttributes method:

Java

  1. @Override
  2. public Map<String, String> getBodyAttributes(String variant) {
  3.   if ("dark".equals(variant)) {
  4.     // the <body> element will have the "theme" attribute set to
  5.     // "dark" when the dark variant is used
  6.     return Collections.singletonMap("theme", "dark");
  7.   }
  8.   return Collections.emptyMap();
  9. }

Then you need to create the themed .html files for the elements for an example see: Themed Vaadin Button

Note
The themed files should be stored to ${frontend.working.directory}/bower_components/{component}/theme/myTheme which would by default for vaadin-button be src/main/webapp/frontend/bower_components/vaadin-button/theme/myTheme/vaadin-button.html

If you need to import some theme-specific files, use @HtmlImport as shown in the example above: @HtmlImport("frontend://bower_components/vaadin-lumo-styles/color.html")

Each of those html imports will be added to the BootstrapPage head.

Note
In the case where an exception navigation chain doesn’t get the used Theme the exception navigation target can be annotated with @NoTheme so that a warning is not logged for missing theme.

Creating Your Own Component Theme

The theming for the Vaadin components is built using Vaadin.ThemableMixin. See vaadin-themable-mixin wiki to learn how theming of Vaadin components is done.