How can I get rid of the space around me application

Hello folks, I have an app which uses Lumo.dark but I have a ~5-10px wide white border around it.

This was answered a while back, but was lost before I could implement it due to the switchover to discord w/threads

Your outer most layout is probably a vertical layout or horizontal layout which has padding/margin which you can disable

Is there a layout that doesn’t do this by default?

The plain old div (but you lose a lot of usability (DX)) or the flex layout

I tried using:

var main = new HorizontalLayout();
        main.setWidth("3800px");
        main.setHeight("4444px");
        main.getElement().setAttribute("theme", Lumo.DARK);
        main.setPadding(false);
        main.setMargin(false);
        main.setSizeFull();
  

And it still seems to display the same…

Why does your main layout have a fixed width and height? 100% sounds way better for scaling

Edit: I see you doing the setSizefull() later… well… did you checkout with F12 in the Browser what component is the culprit of the added whiteness? Looks like it’s something else

You’re setting theme=dark not on the entire UI, but on a particular layout inside the UI. See instructions for setting dark theme for the whole app here https://vaadin.com/docs/latest/styling/lumo/variants/light-dark

(not sure why you have some kind of margin around your main layout at all, but hard to say without seeing the rest of your code, or a DOM inspector screenshot)