Theming Overview

Vaadin separates the appearance of the user interface from its logic using themes. Theming is the activity that is done when the look and feel of the UI components or application is customized. Theming is done as with any HTML content by using cascading style sheets (CSS). This documentation does not cover the basics of CSS, for more resources see for example the Open Directory Project CSS guides.

Theming can be split into the following concepts:

• Application theming - creating global styles for one application and its views

• Component theming - creating styling for reusable components to use and further customize in any application

This documentation first explains how you can use and customize the ready-made component themes provided by Vaadin. Then it describes the how to theme applications. Finally there is instructions for creating your own component theme and providing the Flow integration for it.