Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps

Question

In Vaadin Flow (versions 10 and later), is there some way to dynamically change the font, font size, font color and such of the widgets in a Vaadin layout?

I do know th

Answer 1

The short answer is yes. And this is one of the major changes between Vaadin Platform version 10 and later compared to Vaadin 8 and earlier. In Vaadin Platform theming is not based on SASS anymore.

The reason for this change is because we use web components to create the client "widgets", and web components are based on latest HTML5 standard. They introduce so called shadow DOM and local DOM concepts. I.e. the internals of the web components cannot be styled in global theme. So number of new concepts for theming is needed. Custom properties, themable mixins, etc. We have chapter in our documentation describing this in detail.

Your particular question can be addressed with CSS custom properties. They are basically CSS variables, and have notation --my-property. There is example in documentation how to add custom properties to custom widgets. Values of these custom properties can be defined in global styles and/or run time via Element API of Flow element.getStyle().set("--my-property", "red");.

Also those styles that are exposed naturally can be modified run time using Element API element.getStyle(), like element.getStyle().set("fontWeight", "bold");

So in general Vaadin Flow offers much more features for dynamic styling than Vaadin 8 ever did.

See also: Vaadin Flow/10/11 style component via css