Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

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 {
}

E6812CD1-FB96-4DB6-8CD3-850A7DC81A06