...
A default style can be included, as well as several additional styles which can be combined with the default style.
The default style is given provided by adding a CSS stylesheet named “default”. If no default style is included, a built-in default style is used. If a default style is written into the theme, the built-in default style is not used.
Additional stylesheets can be provided with other names. The additional styles are injected into the page after the default style. Only one of the additional styles is used at a time. This enables using the same theme in different situations with minor stylistic changes. When a theme is selected, either the default style or the default plus an additional style are selected at the same time.
Management of web themes
Web themes are managed in the management interface. Editors need some of the following permissions:
...
Web themes are not namespace-specific, so having access to them means having access to all of them. On some service installations this means great trust is placed on the editors.
...
Management view
Management view is opened from the main menu by selecting “Web themes”.
The management view enables users to list, create, copy, edit and remove web themes.
...
Web theme editor
Creating or editing an existing theme opens the Theme editor. You can name the editor and configure layouts and styles within.
The editor contains a tree selector where you can select or add layouts and and stylesheets. The layouts and styles are named, and you pick the name when the layout or style is first created.
The theme is saved by clicking the Save button. The changes are viewable immediately in pages where web themes are used.
Activating web themes
One theme can be picked as the default theme. This is done in the System Preferences / Branding section. One theme and one style combination can be selected there.
In OpenID Client settings, any theme and style combination can be selected per client. By default the same theme as is selected in Branding configuration is used.
Layout structure
The layouts are defined as HTML documents. The content must be compatible with Vaadin 8 Designer. Additional documentation is found at the Vaadin 8 documentation site.
Stylesheet structure
Stylesheets are normal CSS documents. They are injected into the <head> section of the web page.