Transitions and gradients

Flow
1

Hey, is it possible to define a transition when switching themes?

2

Also would it be possible to define a button with a gradient background :thinking:

3

I don’t think it’s possible to animate the theme transition.

4

But it is possible to define gradient backgrounds for buttons

5

Try something like

vaadin-button {
    background: linear-gradient(32.15deg, #FF006B 12.1%, #FC5B00 49.94%, #F9BD00 88.57%);
    color: #fff;
    font-weight: 800;
}
6

If you only want to style one button, give it a class name and apply the styles to that

7

Any way to do this with Flow?

8

I mean, there’s getStyle()#set

9

You are better off using your theme / styles.css instead of using the java API for styling.

10

Alright, managed to get something going

11

Is there a way I can add a css class to the entire container so I can do some theme stuff by myself? seems a bit more logical

12

Call addClassName() on any component to add CSS class names (well, most components)

13

Hmm this doesn’t achieve the result I’m looking for

14

Changing the theme is a bit more than just adding a couple classes to the base container

15

Seems like it’s more of a setAttribute(“theme”, whatever)

16

The theme is basically just an attribute at the body element. So you can either change or expand that or apply css classes to the body to have some global effects. The theme itself is then just normal css in your global style. (e.g.

[theme~=“dark”] {
–lumo-primary-color: pink;
})

You could even change the html attribute, if you want to and apply something like
theme-variant=“dark”
to the body element using the Element API on the UI (or some other global-like container), setting the attribute via Java and then select it in css

[theme-variant~=“dark”] {
–lumo-primary-color: pink;
})