Multiple Themes on V23 so I can migrate off of old Business App Starter

Hi there,

So, I have a bit of a weird situation. I have an app that originally started out based on the Business App starter using Vaadin V14. Over the last 3 years, I have added views to it, and have managed to migrate it through the chain all the way up to V23. I am seeing some weird issues with the Business Starter app approach and want to migrate it to the AppLayout in V23. This is going to be a lengthy process as alot of my current views are tied to specific features in the Business App starter.

What I woudl like to do , is add the option for a “newui” experience to my app and slowly migrate views in my app to it. I can do that by creating a new MainLayout based on AppLayout, and recreating views one module as a time.

The only caveat to that, is that I would need to have a different theme applied to the new views. The old V14 allowed for multiple @Theme annotations, but under V23, I only get one.

Is there any way I can do this? Honestly, my CSS is pretty weak, which is why I like Vaadin so much.


Instead of full blown custom themes you can apply custom variants on each view

Even tho I don’t understand why you have custom themes for every view if you aren’t so css experienced

Fair point, but that all comes back to my use of the Business App starter. It had alot of custom css. I may have stuck in one or 2 lines, but it was all based on that starter. I also used the Vaadin Theme Editor to further customise the font/color/size/etc. Using that starter was a quick way to get something running, but I knew I was going to be paying for that down the road. Well, here we are. On desktop browsers, the app still works fine. But something weird happens on iOS Safari Mobile and the bottom of my views are being cut off by overscroll/bounce or some such nonsense. So, I want to get back to as close to out of the box vaadin for the UI framework as I can so I can just focus on my business requirements.

Well if you only customized colors and stuff with Variables you can easily apply IDs or classes to your views and anything below gets those instead of the defaults of the theme

.first {
–vaadin-primary-color: red;

–vaadin-primary-color: blue;

But keep in mind you aren’t required to use the app layout; it’s not mandatory and a custom solution (like the business app) can be valid as well if the corner cases are improved

Thanks for the solution. I’m gonna need to go and get a CSS for dummies book. I have seriously spent 20+ years dodging css as much as possible. Let’s hope I still have some brain plasticity left.