Need help with enabling dark mode Lumo for Web Components

General
1

Hello! I’m new to using Vaadin’s web components (in HTML + CSS + Typescript) and I’ve been searching the documentation for how to setup my app to use the Lumo dark theme. Sadly, I can only find Java documentation. Can anyone please help? Thank you!

2

The Lumo theme has CSS selectors for theme="dark" attributes on DOM elements. This selector also covers child elements which means that you can set the attribute on the <html> or <body> element if you want to use the dark theme for the entire application.

4

In case you want to modify the dark mode styles, the recommended way is to start by modifying the lumo variables in styles.css

[theme="dark"] {
  --lumo-primary-color: #add8e6;
  --lumo-success-color: #90ee90;
  --lumo-error-color: #db7070;
}

Lumo theme documentation shows the default dark theme variables when viewed in dark mode:

image
image2522×1498 217 KB

5

Thanks @Leif, I did use the theme="dark" attribute on the <html> tag but it didn’t seem to make a difference. I will try again this afternoon and respond back. Many thanks!

6

Many thanks Jusso, once I get the dark theme working, I may consider altering its styles.

7

Check out the resolution in this post from a couple of weeks ago Dark mode problem in Web Components