This chapter provides details about using and creating themes that control the visual look of web applications. Themes consist of Cascading Style Sheets (CSS) and other theme resources such as images. We provide an introduction to CSS, especially concerning the styling of HTML by element classes.

Vaadin separates the appearance of the user interface from its logic using themes. Themes can include CSS style sheets, custom HTML layouts, and any necessary graphics. Theme resources can also be accessed from an application as ThemeResource objects.

Custom themes are placed under the WebContent/VAADIN/themes/ folder of the web application. This location is fixed -- the VAADIN folder specifies that these are static resources specific to Vaadin. The folder should normally contain also the built-in themes, although you can let them be loaded dynamically from the Vaadin JAR (even though that is somewhat inefficient). Figure 8.1, “Contents of a Theme” illustrates the contents of a theme.


The name of a theme folder defines the name of the theme. The name is used in the setTheme() call. A theme must contain the styles.css stylesheet, but other contents have free naming. We suggest a convention for naming the folders as img for images, layouts for custom layouts, and css for additional stylesheets.

Custom themes that use an existing complete theme need to inherit the theme. See Section 8.3.2, “Built-in Themes” and Section 8.3.4, “Theme Inheritance” for details on inheriting a theme. Copying and modifying a complete theme is also possible, but it may need more work to maintain if the modifications are small.

You use a theme with a simple setTheme() method call for the Application object as follows:

public class MyApplication
       extends com.vaadin.Application {
    public void init() {
        setTheme("demo");
        ...
    }
}

An application can use different themes for different users and switch between themes during execution. For smaller changes, a theme can contain alternate styles for user interface components, which can be changed as needed.

In addition to style sheets, a theme can contain HTML templates for custom layouts used with CustomLayout. See Section 6.13, “Custom Layouts” for details.

Resources provided in a theme can also be accessed using the ThemeResource class, as described in Section 4.5.4, “Theme Resources”. This allows using theme resources, such as images, for example in Embedded objects and other objects that allow inclusion of images using resources.