vaadin valo theme

What will be the easiest way to use valo theme with different color schemes as exhibited in the demo here:


You can easily apply the same UI settings to your application. Follow these steps:

  1. Create theme extension for Halo theme (it is based on Valo and can be easily tuned)
  2. Copy variables from Valo demo _variables.scss, for instance to your modules/web/themes/halo//halo-ext-defaults.scss.
  3. Restart your application and you will see your new look and feel.

Please note, that you have to add some CSS rules to get really nice theme, because Valo cannot configure all the theme settings automatically. Built-in variables give great flexibility, but theme is still limited by variables set.

1 Like

Hi Yuriy
I did that and only worked for Blue theme. How can I bring options to select different colour options in that demo at run-time?

What problems do you have with another themes ?

Currently we donā€™t support changing themes on the fly and users can only change it in Settings window called from Help - Settings. You can read more on creating additional themes here: