IT Mill Toolkit separates appearance of the user interface from its logic using themes. Themes can include CSS style sheets, custom HTML layouts, and any necessary graphics used by them. Theme resources can also be accessed from an application with ThemeResource objects.

Themes are placed under WebContents/ITMILL/themes folder of the web application. Figure 6.1, “Theme Contents” illustrates the contents of a theme.

The name of a theme folder defines its name. 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.

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

public class MyApplication extends com.itmill.toolkit.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 the section called “Custom Layouts” for details.

Resources provided in a theme can also be accessed using the ThemeResource class, as described in the section called “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.