Lumo.DARK has html background-color:white

Flow
1

Hi,
I have @Theme(value = Lumo.class, variant = Lumo.DARK) in my MainLayout class.
Lumo.DARK variant works only for 100% height. I have page with more data and after 1 page size I see white background (dark1).
I have fount that it is related to html background-color: white (dark2).

Do you know how to disable this white background in my App?
17661568.png
17661571.png

2

Flow applies the theme="dark" property on the <body> element, but it should be applied to the <html> element. This has been fixed in Vaadin 14 (Flow 1.5): https://github.com/vaadin/flow/issues/4765

Another issue is the default <body> styles that Flow adds, making the body element 100% high. If you want to make the body element grow naturally you should override the height of that in your own stylesheet.

3

Thanks for your answer.
So I cannot have it working in Vaadin 10 (LTS)?

4

About body you mean:

body { height: 100vh; width: 100vw; margin: 0; }

Can you give me an example how to overwrite it in shared-styles.css or in java code?

5

michal kostro:
Can you give me an example how to overwrite it in shared-styles.css or in java code?

Hi Michal!

At least with shared-styles.css you can do the following:

<custom-style>
  <style>
    body {
      height: <value>;
	  width: <value>;
    }
  </style>
</custom-style>
6

Thank you