Switching themes

Flow
1

If I have two theme folders my-app-light and my-app-dark.
How can I toggle between them through the app? V24

2

You can’t. Theme can only be one per application at runtime.

You are looking for a variant - see Toggle between light and dark theme in Vaadin Flow | Vaadin

3

You need to have a single theme folder where the colors for both (or multiple) themes, to achieve to switching themes during runtime. If not you need to choose the theme before building the app.

Rely on the Lumo Style Properties.
I mostly go to the Lumo Theme Editor and create my themes there. Then you can copy the css to e.g. your styles.css and have something like this:

html {
/* light theme variables */
--lumo-primary-color: red;
}
[theme~="dark"] {
/* dark theme */
--lumo-primary-color: white;
}
[theme~="pink"] {
/* pink theme */
--lumo-primary-color: pink;
}
1 Like
4

Thank you for this.

But are there any work-arounds to achieve what I mentioned?

5

Do you mean something like Option 2 of this post, that Christian mentioned above?

6

Or do you mean that: https://vaadin.com/docs/latest/styling/application-theme#applying-a-theme

7

I meant something like changing
<link rel="stylesheet" href="themes/default/styles.css" />
from some view in the app

8

No. Only your active theme is compiled into the application.

9

This should be of help: https://vaadin.com/docs/latest/styling/advanced/runtime-theme-switching

2 Likes
10

Thank you everyone for clarifying.