Creating Base Theme for multiple projects / Theme Inheritence

Flow
1

Hi.

I got a problem with creating a base theme for all our Projects. The goal is that we have a single theme for all our projects that can be overriden on demand and needs to maintained in just one place.

We have a project with some common components, which is included as a dependency in the other projects (all gradle based). Using the components isn’t a problem and works fine. I though if I also add a theme there, I could also access it in the other projects.
The Theme itself is based on Vaadin’s “Base Theme” and the structure is similar to the structure of the Dashboard theme.

First priblem was inheriting the theme. I solved this by using the following import:

@import "../../../../../../../vaadinsharedcomponents/src/main/webapp/VAADIN/themes/sharedComponents/sharedcomponents.scss";

This is quite ugly but I thought it worked. Now I noticed I get wrong path when loading images. For example for the loading indicator:

background: transparent url(../../../../../../../vaadinsharedcomponents/src/main/webapp/VAADIN/themes/base/common/img/loading-indicator.gif);

Of cause, this path doesn’t exist and it fails to access the ressources of the base theme.

So my question is: How can I create a Theme that I can use similar to the Vaadin’s Base Theme?

2

I finally figuered it out myself. To build and reuseable Theme you need to build a jar resembling the vaadin-themes.jar. Basically you need to have the Vaadin/themes/yourTheme/ path in it. All scss files needed to be located there. The Theme can’t be compiled on it’s own from eclipse, but it works when it is used by an other theme. You can import/include it like a built in theme.

When you are using gradle/maven (or any other build system) the easiest way is to start with an empty java project. Then copy all scss files to (/src/main/ressources/)Vaadin/themes/yourTheme. Afterwards you can add the project as a dependency like you would with any Java-project. Gradle/Maven automatically take care of creating the jar with the correct paths and adding it to the theme compiler correctly.

There is a
guide for Vaadin6
, which gave me the idea how to do it in Vaadin7. It would be nice if it could be updated for Vaadin7 and an example how to do it using a build system. In generally I think it would be a good idea to extend the documentation of how to use vaadin in ant/gradle/maven enviroments. All non-trival projects use some kind of build system and the documentation usually just talks about eclipse.

3

Indeed, the “@import xyz.scss” is relative to the location of the importing theme file whereas things that go all the way to the browser (like images or imported CSS) usually just use something like “…/vaadinsharedtheme/myresource.xyz”

The webapps directories of all the themes are overlaid at runtime (if not at packaging time) in the WARs/JARs so from the point of view of the client there is only one VAADIN/themes at runtime.

The latest changes for the Vaadin SCSS compiler should also allow defining extra paths for the theme compiler so that you can easily use relative paths and just give the compiler the root directories under which you have shared themes. This requires running the SCSS compiler classes directly, though, as there is no support for these in the Eclipse plug-in.