theming
Installation
SKILL.md
Vaadin 25 Theming: Aura & Lumo
Use the Vaadin MCP tools (search_vaadin_docs, get_component_styling, get_component_java_api) to look up the latest documentation whenever uncertain about a specific API detail. Always set vaadin_version to "25" and ui_language to "java".
Vaadin 25 ships two fully supported themes — Aura and Lumo. They differ in visual style, customization approach, and available features. This skill covers both.
Choosing a Theme
| Factor | Aura | Lumo |
|---|---|---|
| Visual style | Modern, uses transparencies and gradients | Classic, clean and flat |
| Customization model | Few core properties, computed variations | Many individual tokens, granular control |
| Color system | 7-color palette, auto-computed variants, dynamic accent color | Semantic color scales with explicit opacity variants |
| Font sizing | Single --aura-base-font-size and individual --aura-font-size-*tokens |
Individual --lumo-font-size-* tokens |
| Spacing/sizing | Single --aura-base-size and individual --vaadin-padding-* and --vaadin-gap-* properties |
Individual --lumo-space-* tokens |
| Border radius | Single --aura-base-radius and individual --vaadin-radius-* tokens |
Individual --lumo-border-radius-* tokens |
| Utility classes | None | LumoUtility.* (Tailwind-like) |
| Dark mode | color-scheme: light dark (CSS native) |
color-scheme: light dark (CSS native) |
| Elevation | Surface level system (--aura-surface-level) and shadow tokens (--aura-shadow-*) |
Explicit shadow tokens (--lumo-box-shadow-*) |