Styling your Vaadin application with Lumo

When it comes to developing user-friendly web applications, Vaadin provides a robust platform that offers a wide range of customization options. At the heart of these options is Lumo, a theme that sets the tone for your application’s aesthetics. Vaadin’s flexibility allows you to tailor each aspect of your application, from buttons to typography, all to fit your brand’s unique identity.

Lumo

Lumo is more than just a theme. It’s a system of style properties that gives you control over the colors, fonts, sizes, and other styles used by Vaadin components. These CSS custom properties or variables are identifiable by the --lumo- prefix.  They are how you make variations to your styling within Lumo, which keeps a consistent look and feel across your application. For example, styling the font size and line height for paragraphs in a section would be accomplished with this code:

section.p {

font-size: var(--lumo-font-sizel);

line-height: var(--lumo-line-height-m);

   }

Light and dark variants

Lumo comes with two built-in color variants, light and dark, which can be toggled to accommodate user preferences or to align with system settings.  Beyond the defaults, Lumo’s style properties can be customized to reflect your application’s branding, whether you’re aiming for a sleek, professional look or a more vibrant, dynamic interface.

Lumo's light and dark variants on a mobile screen.

Compact mode

For applications requiring a more data-dense layout, Lumo offers a compact mode. This mode reduces all components' font size and spacing, allowing you to fit more on the screen without sacrificing readability. Using compact mode is as simple as a @JsModule annotation importing an additional stylesheet as seen below:

@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js") 

public class Product { 

}

Customizing components

Vaadin components are inherently customizable. With built-in style variants, you can tweak components at a granular level. For instance, if you want a green primary button with a Roboto font, you can apply this globally with the following code snippet:

html {

  --lumo-primary-text-color: white; 

  --lumo-primary-color: #4CAF50;

  --lumo-font-family: 'Roboto', sans-serif;

}

This assumes you have imported the Roboto font and have the HTML coded for your button. 

Custom CSS

Sometimes, you’ll need to go beyond what the style properties offer. This is where custom CSS comes into play (more on this here: https://hilla.dev/docs/react/guides/styling). While Vaadin’s components may contain shadow DOM requiring specific selectors for styling, once you’re accustomed to that syntax, there’s no style you can’t accomplish. You can add borders, change background color, and tweak margins to your heart’s content while ensuring the component’s stylings are isolated from the rest of the page.

Typically, this will be accomplished with the ::part pseudo-element, which allows you to style specific parts of shadow DOM components from outside the shadow DOM. For instance, if you want to style the vaadin text field component to have a green border, that would be accomplished by utilizing the ::part as mentioned earlier, then applying that only to the part of the component you’ve chosen to target as follows:

vaadin-text-field::part(input-field) {

  border: 1px solid #green;

}

The theme

When setting up your theme, organization is key. We recommend creating a master stylesheet named styles.css —a file you're likely familiar with but taking the extra step of placing it in a theme folder. This is where you'll define global styles or import additional stylesheets. The theme folder can include images and fonts, keeping style concerns nestled together.

Conclusion

Vaadin’s Lumo theme and styling capabilities provide a foundation for creating the custom look and feel you desire for your applications. Whether you prefer using convenient style properties or diving into custom CSS, Vaadin offers the tools you need to ensure your application not only functions well but also looks great. Happy styling!

Learn more about Lumo in the documentation -->