I need the possibility for using different themes for different customers. Therefore, I use the valo theme as base and an own theme, let’s say ‘parentTheme’ that inherits from the valo theme for different common customization for all customer themes. For the individual customer themes, I have different themes, let’s say ‘childTheme1’ and ‘childTheme2’ that inherit from ‘parentTheme’ were only some specific settings were made, e.g. the focus color of the theme, the app-loading-text,…
My problem is now that ‘childTheme1’ and ‘childTheme2’ don’t use their settings; some settings were used from ‘parentTheme’ although there exist other, overridden settings at ‘childTheme1’ and ‘childTheme2’.
Let’s have a look at the code for better understanding:
content of parentTheme.scss:
$v-focus-color: red;
$v-app-loading-text: “parentTheme”; @import “…/valo/valo.scss”; @mixin parentTheme { @include valo;
//some commnon settings that should be used by ‘childTheme1’ and ‘childTheme2’
}
My goal is, that the focus color of components is blue, if I use childTheme1. But the Vaadin components don’t use it. I made the control at …/themes/childTheme1/styles.css - everything has the focus color red. If the focus is on a com.vaadin.ui.TextField, the border is red. If the focus is on a com.vaadin:Button, the border is red…
The app-loading-text should also be ‘childTheme1’, if I use the ‘childTheme1’, but in fact it’s ‘parentTheme’.
I have the exact same scenario, but with seriously strange results. In my parent project, the theme files are located in src/main/resources/VAADIN/themes. (I am using Maven by the way). The packaging for the parent project is “jar”. When I include that jar in another project, I can use @Theme(“parent”) on my UI and it does exactly what I expect. However, if in the child project I use theme (“child1”), then the complete theme is lost in the browser. I have tried putting the theme in src/main/resources/VAADIN/themes (as I did in the parent) as well as in src/main/webapp/VAADIN/themes (which is supposedly the right way of doing it). The theme compiler says it compiles the theme “child1”, but I can not find a single file that in target or the above folder that has a current timestamp - so I get the impression the theme compiler does nothing even though it reports that it succeeds. When I use @Theme(“child1”) and I open the project in a browser all styling is gone. If I use the browser’s “View source”. I have tried everything I could think of - I have compared style files against a brand new project and against my parent styles - there seems to be no problem with with style definitions. I have also tried to import the “reindeer” theme (which is imported in parent style) in child style as well. No matter what I try, the page in my browser is complete crap - all components are cramped together without any styling whatsoever.
So, no, I do not have any idea. The documentation that Vaadin provides for creating your own styles does not explain anything, it just gives you a very simply example and you have to figure out how it works. I think what I am going to try next is to create a project just for the style - package it as a jar and use the jar in the child project - maybe that works.
Found the problem. The vaadin eclipse plugin that provides the “compile theme” and “compile widgetset” buttons was not doing anything, so I compiled the themes manually. See the section on “Compiling in Command-Line” in
https://vaadin.com/docs/-/part/framework/themes/themes-compiling.html . The jars I needed in the class path was gwt-user, vaadin-sass-compiler, vaadin-themes and the jar containing my parent theme.