You can create custom themes for apps. Set a
theme property in your app descriptor.
First, Magnolia will look for a Vaadin theme stylesheet at
/VAADIN/themes/orange/styles.css, following the same pattern as any Vaadin theme (typically under
- You can also use Sass. Vaadin will try to serve the compiled css on the fly, if the Vaadin
productionModeis off. For production, you will have to configure Sass compilation in your Maven pom. See Compiling your Sass themes below.
- Magnolia will then inject this stylesheet into the document's head when the app starts, using Vaadin's CSSInject addon.
It will also add a CSS class name to the app's container
div element, such as
app-orange. With this, you can make your CSS selectors more specific, and make sure your styles apply only within your app.
Please also mind that, because they are configured through the app descriptor, app themes enable you to use multiple themes for different Magnolia apps, at the same time (unlike the advanced technique described below).
Customizing the admincentral theme
In some cases, you may want to customize styles outside of any app, e.g. in the apps launcher, or in the Pulse message views. There, app themes are not sufficient, but you may still configure the Vaadin theme used by the entire admincentral.
Changing the Vaadin theme for the entire application is technically more advanced than app themes. Unless you already have a good understanding of Sass, as well as themes in the Vaadin world, you should probably read about it through the Vaadin documentation first.
Like for any Vaadin application, there can be only one Vaadin theme per Vaadin UI. In Magnolia's case, this is the
Sass themes offer the advantage of being composed from several other Vaadin themes, through Sass mixins. Themes are ultimately compiled and served as one big chunk of CSS.
Implementing the custom theme
In order to implement your own theme, you have to use Sass. First, you must always "inherit" from Magnolia's default
admincentral theme, i.e. by importing and including its Sass mixin.
Only then, you may add your custom styles, or include additional Vaadin themes you wish to use.
Configuring the custom theme
Once your Sass theme is ready, and it includes both the
admincentral mixin and your custom styles, tell Magnolia to use it.
Edit your webapp's
magnolia.properties file and set the key
The expected value is a theme name as Vaadin expects it, i.e. the name of the theme folder under
Compiling your Sass themes
When you develop custom Sass themes (.scss), set Vaadin's
false in your web.xml, so that Vaadin compiles your stylesheet on the fly:
If you write a plain CSS theme, you don't need to do this.
When you go to production, you don't want to keep Vaadin's
false. Therefore, the Sass theme is not compiled on the fly anymore.
You need to compile your Sass theme in your module build.
This may be achieved with the groovy maven plugin, as shown below (given the Sass compiler is on the classpath). Alternatively, you may use also the Vaadin maven plugin, as mentioned in Compiling Sass Themes, in the Vaadin documentation.