Theming Migration from Vaadin 10–13 to Vaadin 14

One of the biggest changes in Vaadin 14 is the move from Bower, HTML imports and Polymer 2 to npm, ES modules and Polymer 3.

Steps to migrate .html theming files to .js and .css

The instructions below assume the following Polymer 2 example in a Vaadin version 13 application:

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">
<dom-module id="my-app-layout-theme" theme-for="vaadin-app-layout">
  <template>
    <style>
      :host {
        background-color: var(--lumo-shade-5pct) !important;
      }
      [part="content"] {
        height: 100%;
      }
    </style>
  </template>
</dom-module>
<custom-style>
  <style>
    .v-system-error {
        color: red;
    }
  </style>
</custom-style>

To convert your files to Polymer 3 and make them them usable in a Vaadin version 14 application.

1. Generate as many .css files as HTML blocks in your .html file

:host {
  background-color: var(--lumo-shade-5pct) !important;
}
[part="content"] {
  height: 100%;
}

.v-system-error {
    color: red;
}

1. Instruct Vaadin to import these CSS files using the CssImport annotation.

@Route(value = "")
// will be imported as a <dom-module> tag for theming components
@CssImport(value = "./styles/my-app-layout-theme.css", themeFor = "vaadin-app-layout")
// will be imported as a <custom-style> tag
@CssImport(value = "./styles/my-custom-styles.css")
public class MyApplication extends Div {
}

Updated 2021-03-08  Edit this article