Integrating Your Own Component Theme

    The 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

    Java

    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

    If you need to import some theme-specific files, use 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.

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