> Markdown version of [Theming Migration](https://vaadin.com/docs/v14/flow/upgrading/v10-13/v14-theming-migration). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# 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.

## <a id="steps-to-migrate-html-theming-files-to-js-and-css"></a>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
<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

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

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

`frontend/styles/my-custom-styles.css`

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

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

```java
@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`