Change shadow dom style of a custom component

Flow
1

Hi,

I’m trying to create a vaadin standard layout for few apps. I would like to change dynamically some css properties (with theme variant for example). For example, changing the logo…

I try this:(inside my shared-styles.html).
I would like to be able to change a css property if the theme is dark.

/* Works but i need to define an extra variable */
 p {
    color:var(--custom-color);
}
/* does not work */
[theme~="dark"]
 p {
   background-color:grey;
}

Is there a solution to retrieve the theme on html inside the hello-world component ?

Is the first solution is the “right” way to override style inside webcomponent ?

You can find a full example (with some other stuff) here:
https://github.com/jcgueriaud/demo-vaadin-flow/blob/master/src/main/resources/META-INF/resources/frontend/styles/shared-styles.html

and

https://github.com/jcgueriaud/demo-vaadin-flow/blob/master/src/main/resources/META-INF/resources/frontend/src/views/hello-world.html

Thanks,

2

I have the same problem, did you find a solution?

Thanks,

Paul

3

hi,

i think it’s working and i think it’s a right way to do that.

if you have that kind of problem, you can share an example.

4

I have a

Checkbox ch = new Checkbox(true); ch.setEnabled(false);

I need to change the color of disabled checkbox. Pure java … how to?