How to attach event listener to MediaQueryList from flow?

I am trying to get a Java function called, when the preferred theme changes. How can I do that with the flow API?
JS equivalent would be: matchMedia("(prefers-color-scheme: dark)") .addEventListener("change", window.applyTheme);, but the window.applyTheme function should be replaced with a call to a Java function

See here on how to call something on the server from the client: https://vaadin.com/docs/latest/create-ui/element-api/client-server-rpc/#calling-server-side-methods-from-the-client

Hello Sascha, thanks for the ref.
Does this also works for the UI (body) element or do I need to create some extra element which is attached to the dom just for that purpose?

That is a good question. It works on a page level at least (@Route), as well as in page layout classes. But I can’t find anything for the UI itself.

Ok, is this maybe something interesting for a new feature?
For my case it could work, because I handle the theme changing in the main layout, so it should work there. I have to try. Thanks!

You could probably also use https://vaadin.com/directory/component/mediaquery

I didn’t think about this use case but I think it should work.

Also, if you decide to go the @ClientCallable route, make sure to also add @AllowInert to your function, otherwise it will not get called from javascript if at the time a modal component (e.g. Dialog) is open

Thank you all for the hints. Didn’t had the time to test it.
I will try if the MediaQuery addon works, would be nice.