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:

HTML

  1. <link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">
  2. <dom-module id="my-app-layout-theme" theme-for="vaadin-app-layout">
  3. <template>
  4. <style>
  5. :host {
  6. background-color: var(--lumo-shade-5pct) !important;
  7. }
  8. [part="content"] {
  9. height: 100%;
  10. }
  11. </style>
  12. </template>
  13. </dom-module>
  14. <custom-style>
  15. <style>
  16. .v-system-error {
  17. color: red;
  18. }
  19. </style>
  20. </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

frontend/styles/my-app-layout-theme.css

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

frontend/styles/my-custom-styles.css

  1. .v-system-error {
  2. color: red;
  3. }
  1. Instruct Vaadin to import these CSS files using the CssImport annotation.

Java

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