Vaadin uses themes to separate the user interface’s appearance from its logic. Themes make applications look and feel consistent to end users. They offer a shared visual language which you can apply to your application-specific styling.
Themes and application-specific styles are implemented using Cascading Style Sheets (CSS).
Style sheets are authored as
If you are including style sheets in client-side code they can also be authored as
- Custom Theme
A custom theme is the easiest way to provide a custom look and feel for your entire application. Available starting from platform versions 14.6 and 19
A theme is a collection of style sheets which are loaded when the application starts. It defines global font styles and text and background colors, among other shared visual aspects.
A theme defines all component styles but can also affect component behaviour. For example, the position of the date picker’s overlay on small viewports is determined by the theme.
The term “theming” is used for styles that apply across all style scopes, and in general affect the shared visual aspects of an application.
For example, you could choose the primary color or font to be used for all components. You could also apply a certain background color for all buttons across the application.
The term “styling” is used for styles that apply to particular views or instances of components. For example, you could style an individual button in one view to have a different background color than all the other buttons in the app, or increase the cell padding of a data grid in one view.
The techniques used for theming and styling are mostly the same. The main difference is how you scope the CSS: for all instances of a certain component, to certain theme variants, or only to specific component instances.
Vaadin comes with two built-in themes you can use as-is or as the basis for your own customization.
All Vaadin components implement the Lumo theme by default, which gives your application a coherent and polished look out-of-the-box. In addition to light and dark modes Lumo has a built-in compact variant. It reduces the space between elements and is useful when you need to fit a lot of data onto one screen at the same time.
See Lumo for more details.
The Material theme is an implementation of Google’s Material Design guidelines, and comes with both light and dark modes (color palette variants). The guidelines are followed whenever possible. However, some features aren’t in the guidelines and in those situations we take inspiration from Material Design and try to fit them in seamlessly.
See Material for more details.