Annotation Type Theme

@Target(value=TYPE)
 @Retention(value=RUNTIME)
 @Inherited
 @Documented
public @interface Theme

Defines that there is a theme to use and defines the theme handler implementation.

Theme annotation should be added to your root navigation level, RouterLayout or to the top level @Route.

The themeFolder property defines the name of the application theme. When the theme is present inside the project, it maps to the frontend/theme/<application-theme-name>/ folder or alternatively to a folder inside the static resources of a jar file, like src/main/resources/META-INF/resources/theme/<application-theme-name>/. The application theme is always based on Lumo theme and this is the recommended way to theme applications starting from Flow 2.6 and Vaadin 14.6

Alternatively , if instead of Lumo theme the Material theme or another "old style custom theme" is to be used, that can be specified with the value property. This allows defining a way to translate base component url to the themed component url (@see AbstractTheme), which specifies components styles.

By default com.vaadin.flow.theme.lumo.Lumo theme is used if it's in the classpath. You may disable theming with NoTheme annotation. Adding an empty Theme is equal to not having a Theme annotation and will default to com.vaadin.flow.theme.lumo.Lumo if available.

Defining different Themes for different views will end throwing an exception.

Here are examples:

• On the navigation root

   
   @Route(value = "")
   @Theme(Lumo.class)
   public class Main extends Div {
   }
   
   

• on the top level router layout

   
   @Theme(MyTheme.class)
   public class MainLayout extends Div implements RouterLayout {
   }
  
   @Route(value = "editor", layout = MainLayout.class)
   public class Editor extends Div {
   }
   
   

Since:

1.0

Author:

Vaadin Ltd

See Also:

AbstractTheme, NoTheme, RouterLayout, Route