Apply Dark Mode for whole application (Flow)

How would I go about applying the dark mode for the whole application based on a Local Storage Key? I want to have a toggle button like in the docs site, so not OS preferred. I looked at the Local Storage of the docs site and there’s a key called vaadin.docsApp.preferredTheme. How and where would I fetch the content of the key and apply the theme for the whole app? And would setting the Key in the Local Storage in a Click Listener automatically apply a switch between light/dark?

It’s probably easier for a flow application doing this with a server side storage like a user profile in a database or if you don’t wanna store it in the database a cookie would work also. A cookie can be read for example in the UI init listener and there you can use a JavaScript snippet to apply the dark variant to the html tag

Okay. Is there a way to “listen” to cookie changes? So when I click the button and change the cookie, a javascript listener is called that changes the theme dynamically without a page reload?

No, you have to change the theme by using Javascript once you persist the cookie - later on you can read the cookie on session creation and apply the appropriate JavaScript again

I managed to get it working :slightly_smiling_face: Thank you for your input