A practical guide for styling Vaadin components so they work consistently across both the Lumo and Aura themes. The approach centers on a token-driven CSS architecture with thin theme detection, avoiding duplicate component implementations. Three real-world integration patterns are covered: Lit-based web components using ThemeDetectionMixin, server-side components that detect the active theme via JavaScript on attach, and third-party jQuery-based widgets integrated via connectors. Key UX cohesion points include focus rings, required indicators, disabled/read-only states, invalid state styling, and overlay surfaces. The guide also notes current framework gaps and recommends Vaadin 25.1+ for more stable Aura token support.
Table of contents
What visual cohesion means in practiceCore architecture rulePattern map by component typeFoundation styling pattern for all implementationsExample 1: Color Picker (Lit web component)Example 2: Bean Table (server-side custom DOM)Example 3: Pivot Table (third-party legacy JS)Matching Vaadin overlay quality in third-party dialogsVaadin 25.1+ recommendationsCurrent framework gapsOptional acceleration for dual-theme CSSPractical checklistFinal takeawaySort: