Vaadin sampler dynamic color change

How does the dynamic color change functionality work in Vaadin sampler?

Exact steps - Select component → settings → theme → custom theme → change color combo box

I actually want to know how the css values are passed to the scss/css files on changing the values - color, font etc…


Can anyone check into this, would be very grateful of you.

Hi Dinesh,
If you want to know the values the UI is fetching from your application or CSS. Firebug can help you. Try Installing Firebug in Firefox.

Hi Annie,
Thanks for reply.

But my question is ‘How does the change in style values work on the fly’?

  • Eg. If I change the background-color, the change is instantly visible. I would like to know the logic/process behind?

Actually, the confusing part is there is no ‘dynamic style injection’ or cssLayout used.

Hi Dinesh,
Sampler compiles a new theme on the server for every variable change applied in the theme switch control. First it uses UI.setTheme() with a dynamic theme name to make the client request for a new css file.

There’s a custom tailored servlet filter which then catches requests for the theme files and does the sass compilation including the dynamic variables (stored in a session attribute before the first phase) and returns the resulting css for the client.

The source code is intentionally not public as it’s a dirty hack implemented for demonstrational purposes only :slight_smile: It bypasses much of the default behaviour of Vaadin so the code is not even guaranteed be backwards compatible.

Oh but I have actually got this working in different way, and it would be nice to know if its fine.

  • Firstly, styles are injected using dynamic injection - Page.getCurrent().getStyles().executeJavascript(“”);
  • When a color is selected/changed, in its respective listener, using javascript
  • I get the style tag and its text content and replace the ‘color’ value and thereby update the style tag.


And I know the values updated are lost on page refresh.

Sure, using css injection trough Page.Styles is a good solution if you only need to add some new/overriding css-rules dynamically.

Tomi, its been very nice of you.