Vaadin 25 upgrade guide doesn't explain how to apply 'dark' lumo theme

[bramvonk]

Description of the bug

When following Upgrading from Vaadin 24 - Theming and styling, I want to replace the deprecated @Theme by the proposed solution. However, it doesn't explain how to upgrade from what I have now, @Theme(value = "my-theme", variant = Lumo.DARK). It says: use @StyleSheet(Lumo.STYLESHEET). But that gives me the light variant.

I've also read Theming system renewal where it says:

The Light and Dark Lumo variants (and corresponding variants of Aura) can be applied with a single line of CSS (color-scheme: dark), either statically, or based on the user's system settings.

so I've tried having a custom css with in it:

body {
   color-scheme: dark;
}

putting that in src/main/resources/META-INF/resources/my-styles.css and loading it with

@StyleSheet("my-styles.css")

but that doesn't seem to do anything.

Expected behavior

I think a lot of people have used the dark variant, I think it would be good to explain on the upgrade page how to use that without keeping the deprecated @Theme.

Minimal reproducible example

N/A

Versions

• Vaadin / Flow version: 25 rc1
• Java version: 25
• Spring Boot 4.0.0

[knoobie]

V24 + V25:

UI.getCurrent().getPage().executeJs("document.querySelector('html').setAttribute('theme', 'dark'");

V25:

UI.getCurrent().getPage().setColorScheme(Value.DARK); or @ColorScheme(Value.DARK)

[bramvonk]

Ah cool, the @ColorScheme works fine :)

As the upgrading talks about replacing @Theme which supports the dark theme as well, I think it should be in the upgrading guide, so I've made a PR for that: https://github.com/vaadin/docs/pull/4985/files

Feel free to adapt or ignore :)

[caalador]

The PR has been merged to the documentation with an additional link to the colorscheme documentation.