Applying an application theme with global styles

[pleku]

When building an app, I want to apply a theme to the app from one location in the project which will automatically inject the defined css there as global styles, so that I don't have to do it myself

The theme folder is inside the project in frontend/theme/mytheme/ and applied with @Theme("mytheme") annotation. This means the annotation value attribute is changed to type String and the current value, an attribute of type Class, is renamed to baseTheme. Usage of both at the same time should throw an exception describing that it is not supported and only one should be used. Also the variant attribute is only relevant when the baseTheme is used.

Applying the @Theme annotation on a class implementing @AppShellConfigurator will take the theme into use. Discovering multiple theme annotations on the classpath should throw, as it used to be so that the theme was defined in the root layout and user might accidentally forget to remove that.

The webpack build will get the used theme and then load any css from there as global css. Depends on #9245.

Acceptance Criteria

• Implementation split into Enable using custom plugins with webpack #9283 and Introduce application theme by changing the theme annotation #9281
• Create a demo for the application theme with global styles #9282 There is a demo for the feature in vaadin/application-theme-demo which showcases the in-project app theme usage with some global css applied to start.vaadin.com Java views
• The docs for theming should be revised and added for the new In-App Theming #9284 The docs for https://github.com/vaadin/docs/tree/master/articles/themes about theming should be revised and add this
  • Application theme is the way to go instead of the old way of doing things
  • The existing docs about lumo/material could be either removed or "deprecated" as not recommended anymore so those could be moved and a disclaimer added to top that "this is how it used to be"
  • Need to check how the variant should be applied for Lumo later on and update that on docs

[caalador]

The single @Theme annotation is linked to tickets #9092 and #9110

[knoobie]

@pleku is this planned to be backported to v14?

[pleku]

@knoobie yes it is. But as the target release is v19 beginning of March, I would not expect this to v14 before early Q2 2021 🙍‍♂️

[knoobie]

@pleku thanks for the info! I'm really looking forward to this. Q2+ is totally fine for more.

[pleku]

I'm really looking forward to this. Q2+ is totally fine for more.

Great to hear, since to be honest, I feel really bad about having to say it takes almost 6 months to get the value to the users. 😅

[knoobie]

@pleku You don't have to. Quality gates and proper development take time. It's not like the feature is already done. You are currently developing it.

Just as example: Spring Boot changed to a 6 month release circle of the upcoming 2.x releases as well. Meaning they now "publish" / "plan" the stuff that is coming in Q2 2021 like you do with theming.

[pleku]

To be released in 6.0.0.alpha1