Each user interface component in IT Mill Toolkit has a set of style classes that you can use to control the appearance of the component. Some components have additional elements that also allow styling.

The following table lists the style classes of all client-side components of IT Mill Toolkit. Notice that a single server-side component can have multiple client-side implementations. For example, a Button can be rendered on the client side either as a regular button or a check box, depending on the switchMode attribute of the button. For details regarding the mapping to client-side components, see the section called “Defining a Widget Set”. Each client-side component type has its own style class and a number of additional classes that depend on the client-side state of the component. For example, a text field will have i-textfield-focus class when mouse pointer hovers over the component. This state is purely on the client-side and is not passed to the server.

Some client-side components can be shared by different server-side components. There is also the IUnknownComponent, 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.

Style names of sub-components are shown in parentheses.

Using a theme is simple, you only need to set the theme with setTheme().

Defining the appearance of a user interface component is fairly simple. First, you create a component and add a custom style name for it with addStyleName(). Then you write the CSS element that defines the formatting for the component.

IT Mill Toolkit Release 4 had an inheritance mechanism for themes. In Release 5, the themes were greatly simplified. The inheritance mechanism was removed, and now there is only one level of inheritance, where each custom theme inherits the default theme.

More complex inheritance of themes did have advantages in certain use cases. For example, a web application could have a base theme for all users, and themes for specific user roles (normal/moderator/administrator or student/teacher/administrator) or even individual users.

While there is no actual inheritance mechanism, it is trivial to implement inheritance with the @import statement in CSS. For example, let us assume that we have the base theme of an application with 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";

body {
    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.itmill.toolkit.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");
        ...
    }
}