Use multiple themes in spring boot vaadin application

Question

By default we can apply styling to vaadin spring boot applications by annotating UI class with@Theme(themename). In my particular situation i annotated with @Theme(ValoTheme.THEME_NAME) ,but it's not over. Unfortunately, i didn't figured out how to set background for layout without dealing with css and extra files(And it seems the only solution unavoidable).

How to use both themes valotheme and custom (just for setting up background image) at the same time?

Many thanks for suggestions

Answer 1

You can extend a Vaadin theme in your own custom theme. If you extend the Valo theme in your theme, then you get Valo theme plus your own customization and additions:

@import "../valo/valo.scss";

@mixin mytheme {
  @include valo;

  // your own scss here
}

Answer 2

After enumorous attempts to get it done, i was forced to switch over css styling files. With that being said - i had to combine ValoTheme and my own "style".

For Spring Boot Devs: Initially Spring Boot won't generate any presets for custom styles (vaadin plugin for Eclipse and Netbeans does it), so you have to create folders manually: src/main/webapp/VAADIN/themes/<yourthemename>/ and place necessary css files there.

Quicktip:

Time-less consuming way:

1. Make new vaadin project from here: Link
2. Locate theme folder and copy-paste to your project
3. Also do not forget to annotate UI with @Theme("myTheme")

Hope this helps someone