Setting initial theme based on browser persisted value

Hi, I am struggling to find a good way to set the initial Lumo theme DARK/LIGHT.

The dynamic theme switching itself is no issue but I am storing the user preference in browser storage, and since it is read async the initial theme renders before the switch to the persisted one, resulting in flickering.

Is there a way to do get this right on the client during the first render?

Use a IndexHtmlRequestListener and apply the theme attribute. Keep in mind that this is currently broken in 24.0.3+ and to be fixed in the next bugfix release if you use 24.

Edit… storing in the local browser cache… well RIP IndexHtmlRequestListener… but you can insert a script in there that probably loads the local storage and then sets the attribute

I landed on a solution based on the cookbook example https://cookbook.vaadin.com/os-light-dark-theme
where I tweaked the applyScheme to read the user preference from localStorage. If available that setting overrides the OS setting.