Vaadin Chameleon Theme

A general purpose theme with customization possibilities using a color editor.

View larger

Close

View larger

Close

View larger

Close

View larger

Close

View larger

Close

The Chameleon Theme provides a completely new look and feel for your application.

This theme contains several different useful styles for many of the basic components. You can even combine many styles together, like Label.addStyleName("big warning"). See the online demo for all the stylenames and possibilities.

Chameleon is built on top of the Vaadin Base theme, and tries to keep out of the way where appropriate, so small modifications are easy to do with CSS.

If the color schemes provided by default do not suit your taste, feel free to use the online color scheme editor to build a customized Chameleon theme and download it from there. In addition to the colors, you can also change the base font size for the whole theme.

The package contains a Java constants class (ChameleonTheme.java), so you don't have to guess what styles are included.

The editor is also included in the package, as a deployable WAR.

Additional License Note:

While the theme itself is distributed under the terms of the Apache Software License 2.0, the included Chameleon Theme Editor is licensed under the terms of the GNU Affero General Public License 3.0. All the themes created with Chameleon Theme Editor can be distributed under the terms of the Apache Software License 2.0.

Note: all screenshots are taken using Safari 4. The theme outlook varies between different browsers (most notably in Internet Explorer).

Chameleon Theme has been integrated into Vaadin 6.7 and this add-on will not receive any further updates. All changes will be made to the Vaadin Framework only.

Sample code

public MyApp extends Application {

    public void init() {
        setTheme("chameleon-blue");
        ...
        Button button = new Button("Style me");
        button.addStyleName(ChameleonTheme.BUTTON_BIG);
        button.addStyleName(ChameleonTheme.BUTTON_WIDE);
        button.addStyleName(ChameleonTheme.BUTTON_DEFAULT);
    }

}

Links

• Demo & Color Editor

Compatibility