Some development teams find writing their own CSS styles more interesting than others. We have created two theme add-ons to kickstart the visual customization of Vaadin 23 apps. Both themes can be used as they are or further customized to better fit your team’s needs.
CarbonTheme for Vaadin 23 following the guidelines of IBM Carbon Design System.
With the introduction of Carbon Design System, IBM has developed a unique and identifiable design language that the design team at Vaadin admires. The sharp shapes and grayscale color palette give the theme a modern aesthetic without sacrificing accessibility.
Our adaptation of Carbon DS is built on top of Lumo and compatible with all Vaadin components. Our Carbon theme also introduces a number of UI patterns and elements seen in the original design system.
Our take on Carbon currently supports light and dark variants, known as “White” and “Grey 100” in IBM terminology.
Breeze
The differences between Breeze and Lumo aren’t huge; both use the system font and the same sizing. The focus is on subtle changes across all components, which results in a fresh and light look to the application. The styling of Breeze was heavily inspired by TailwindUI.
The theme supports light and dark mode and has a custom color palette for Vaadin Charts.
How to use a theme add-on
Vaadin add-ons are loaded as Maven dependencies.
For example, the Carbon theme is loaded by adding this in pom.xml:
<dependency>
<groupId>org.vaadin.addons.anezthes</groupId>
<artifactId>carbon-vaadin</artifactId>
<version>1.0.0</version>
</dependency>
Custom styles on top of theme add-ons
Application-specific styles can be loaded in addition to the theme package by using the @CssImport annotation.
For example, the application styles generated in Vaadin Start are loaded with:
@Theme(value = "carbon")
@CssImport("./themes/myapp/styles.css")
The loading order is: 1. Lumo; 2. @CssImport; 3. @Theme
Read more about custom themes in the documentation.
Below we compare the three themes; Lumo, Breeze and Carbon side by side. Minor changes were made, as neither of the new themes is optimized to be used with Vaadin Start templates. However, we will look into improving this in the near future.
Do you have a great idea for an app? Get started with Vaadin 23!