Themes

All rules in a theme should be prefixed with a selector for the theme name. You can do that in Sass by enclosing the rules in a nested rule with a selector for the theme name. Themes are defined as mixins, so after you import them mixin definition, you can include them in the theme rule as follows:

@import "mytheme.scss";

.mytheme {

@include mytheme;

}

The actual theme mixin should be defined as follows:

@import "../reindeer/reindeer.scss";

@mixin mytheme { @include reindeer;

/* An actual theme rule */

.v-button { color: blue;

}

}

Built-in Themes

Vaadin includes three built-in themes:

•reindeer, the primary theme in Vaadin 6 and 7

•runo, the default theme in IT Mill Toolkit 5

•chameleon, an easily customizable alternative theme

You can find more themes as add-ons from the Vaadin Directory [http://vaadin.com/directory].

8.4.2. Plain Old CSS Themes

In addition to Sass themes, you can create plain old CSS themes. CSS theme are more restricted than Sass styles - an application can only have one CSS theme while you can have multiple Sass themes.

A CSS theme is defined in a styles.css file in the VAADIN/themes/mytheme folder. You need to import the legacy-styles.css of the built-in theme as follows:

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

.v-app {

background: yellow;

}

8.4.3. Styling Standard Components

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.

Table 8.1, “Default CSS Style Names of Vaadin Components” lists the style classes of all Vaadin components, together with their client-side widgets. Notice that a single server-side component can have multiple client-side implementations. For example, a Button can be rendered on the

Plain Old CSS Themes

233

Themes

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 Section 13.3.1, “Specifying a Stylesheet”. 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 v-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.

Table 8.1. Default CSS Style Names of Vaadin Components

Server-Side Component	Client-Side Widget	CSS Class Name
AbsoluteLayout	VAbsoluteLayout	v-absolutelayout
Accordion	VAccordion	v-accordion
Button	VButton	v-button
CheckBox	VCheckBox	v-checkbox
CssLayout	VCssLayout	v-csslayout
CustomComponent	VCustomComponent	v-customcomponent
CustomLayout	VCustomLayout	v-customlayout
DateField	VDateField	v-datefield
	VCalendar	v-datefield-entrycalendar
	VDateFieldCalendar	v-datefield-calendar
	VPopupCalendar	v-datefield-calendar
	VTextualDate
Image	VImage	-
Form	VForm	v-form
FormLayout	VFormLayout	-
GridLayout	VGridLayout	-
Label	VLabel	v-label
Link	VLink	v-link
OptionGroup	VOptionGroup	v-select-optiongroup
HorizontalLayout	VHorizontalLayout	v-horizontallayout
VerticalLayout	VVerticalLayout	v-verticallayout
Panel	VPanel	v-panel
Select
	VListSelect	v-listselect
	VFilterSelect	v-filterselect
Slider	VSlider	v-slider
SplitPanel	VSplitPanel	-
	VSplitPanelHorizontal	-
	VSplitPanelVertical	-
Table	VScrollTable	v-table
	VTablePaging	v-table
TabSheet	VTabSheet	v-tabsheet

234	Styling Standard Components

	Themes
Server-Side Component	Client-Side Widget	CSS Class Name
TextField	VTextField	v-textfield
	VTextArea
	VPasswordField
Tree	VTree	v-tree
TwinColSelect	VTwinColSelect	v-select-twincol
Upload	VUpload	-
Window	VWindow	v-window
-	CalendarEntry	-
-	CalendarPanel	v-datefield-calendarpanel
-	ContextMenu	v-contextmenu
-	VUnknownComponent	vaadin-unknown
-	VView	-
-	Menubar	gwt-MenuBar
-	MenuItem	gwt-MenuItem
-	Time	v-datefield-time

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.

8.4.4. Built-in Themes

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

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.

@Theme("runo")

public class MyRoot extends Root { @Override

protected void init(WrappedRequest request) {

...

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);

Built-in Themes

235