To start using the theme, you need to install at least one Vaadin Core Element (such as vaadin-text-field) and the vaadin-themes package.
If you install the vaadin-core-elements bundle you get all the necessary dependencies.
Until there’s a stable release for vaadin-themes, you need to install the master branch of vaadin-core-elements.
After installing, import the main theme file in your app, and any element specific theme files you need. Here, we are importing the theme for vaadin-text-field:
You need to import the theme for an element before the actual element itself.
That’s it. Next, you can start customizing the theme for your needs. Be sure to read the browser support instructions below as well.
If you need to support browsers that do not have native support for CSS Custom Properties (IE11 and Edge 14), there are some limitations to how the theming features can be used. These limitations are outlined below.
varCSS custom properties can’t be used in inline styles, or in regular <style> elements. Instead, use the custom properties inside a Polymer element’s template <style> for scoped styles, and wrap your <style> elements with the <custom-style> element for global styles.