8.3. Creating and Using Themes

Each user interface component in Vaadin has a CSS style class that you can use to control the appearance of the component. Some components have additional sub-elements that also allow styling.

Please see the documentation of the particular components for a listing of possible sub-component styles.

Some client-side components can be shared by different server-side components. There is also the VUnknownComponent, which is a component that indicates an internal error in a situation where the server asked to render a component which is not available on the client-side.

Vaadin currently includes two built-in themes: reindeer and runo. The latter is the default theme for IT Mill Toolkit 5 (where its name is "default"); the default theme in Vaadin 6.0 is reindeer.

The built-in themes are provided in the respective VAADIN/themes/reindeer/styles.css and VAADIN/themes/runo/styles.css stylesheets in the Vaadin library JAR. These stylesheets are compilations of the separate stylesheets for each component in the corresponding subdirectory. The stylesheets are compiled to a single file for efficiency: the browser needs to load just a single file.

Various constants related to the built-in themes are defined in the theme classes in com.vaadin.ui.themes package. These are mostly special style names for specific components.

setTheme("runo");
        
Panel panel = new Panel("Regular Panel in the Runo Theme");
panel.addComponent(new Button("Regular Runo Button"));
        
// A button with the "small" style
Button smallButton = new Button("Small Runo Button");
smallButton.addStyleName(Runo.BUTTON_SMALL);

Panel lightPanel = new Panel("Light Panel");
lightPanel.addStyleName(Runo.PANEL_LIGHT);
lightPanel.addComponent(new Label("With addStyleName(\"light\")"));

When you define your own theme, you will need to inherit a built-in theme (unless you just copy the built-in theme).

Inheritance in CSS is done with the @import statement. In the typical case, when you define your own theme, you inherit a built-in theme as follows:

@import "../reindeer/styles.css";

.v-app {
    background: yellow;
}

You can even create a deep hierarchy of themes by inheritance. Such a solution is often useful if you have some overall theme for your application and a slightly modified theme for different user classes. You can even make it possible for each user to have his or her own theme.

For example, let us assume that we have the base theme of an application with the name myapp and a specific myapp-student theme for users with the student role. The stylesheet of the base theme would be located in themes/myapp/styles.css. We can then "inherit" it in themes/myapp-student/styles.css with a simple @import statement:

@import "../myapp/styles.css";

.v-app {
    background: green;
}

This would make the page look just as with the base theme, except for the green background. You could use the theme inheritance as follows:

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

    public void login(User user) {
        if (user.role == User.ROLE_STUDENT)
            setTheme("myapp-student");
        ...
    }

    public void logout() {
        setTheme("myapp");
        ...
    }
}

In the above example, the User class is an imaginary class assumed to hold user information.