Dark mode only applies to devices view height

When applying the dark mode on the lumo theme, it only applies to the viewport of the device, as soon as I’m able to scroll down on a page, the theme get’s removed (e.g. from the footer).

Is there any configuration I’m missing?

How are you applying the theme? To what element?

final var themeList = UI.getCurrent().getElement().getThemeList();
first I get the themeList of the body element, then using themeList.remove & themeList.add to set the correct theme mode I want

generated html file of vaadin is untouched

That isn’t high enough in the hierarchy. It has to be added to the html tag

I was following this guide: https://vaadin.com/blog/toggle-dark-lumo-theme-variant-dynamically

How would I do that?

Javascript

::(

See the comment of the blog and the linked GitHub issue with a snippet for it https://github.com/vaadin/flow-components/issues/3600#issuecomment-1217018804

Alright, that would be setting the theme. But I would need to know which theme is currently set to toggle the other theme. Is that possible with Java or only by JavaScript?

And so I assume there’s no why to get the top-level HTML “object” as an Java object like UI.getCurrent().getElement() returns the body element.

Reaching it from java isn’t really possible later on. Javascript is the way to go

Okay, I’ll give it a try with JS, thanks :slightly_smiling_face:

another option is to construct the UI so that you are never scrolling the page viewport, but rather some internal scroll area (e.g. using a Scroller)

Good point, but I don’t think that would be a good choice for the main content (hero sections and so on), but I got it working now :slightly_smiling_face: