theming

Configure Vaadin 25 theme loading with @StyleSheet and ColorScheme.

6|1|Updated Feb 24, 2026

Search Tags:#theming #aura #dark-mode #design-tokens #vaadin #lumo #stylesheets

Ready to run

npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill theming-marcushellberg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: theming
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/theming
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill theming-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin 25 applications often struggle to choose, implement, and maintain consistent themes across Aura and Lumo, leading to visual drift and higher maintenance costs.

Core Features & Use Cases

Clear guidance on when to use Aura vs Lumo, how to load themes, and how to structure design tokens and color systems.
Best practices for enabling dark mode, token-based theming, and avoiding mixed tokens in a Vaadin 25 app.
Real-world scenarios include prototyping a new UI with a single theme and scaling to a full design system using Vaadin's theming primitives.

Quick Start

Define a single theme (Aura or Lumo) for your Vaadin 25 app and load it in your AppShellConfigurator using @StyleSheet and ColorScheme.

Frequently Asked Questions about theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I implement dark mode in a Vaadin 25 application?▼

Enable dark mode in Vaadin 25 by configuring ColorScheme alongside your selected theme. Using @StyleSheet ensures the proper token-based color system is applied consistently across your UI components.

What is the best way to choose between Aura and Lumo for Vaadin theming?▼

Choosing between Aura and Lumo depends on your UI skin design requirements. You should select a single theme to avoid mixed tokens, preventing visual drift and reducing maintenance costs across your app.

How do I load stylesheets and structure design tokens in Vaadin 25?▼

Load stylesheets in Vaadin 25 using the AppShellConfigurator with @StyleSheet. Structure your design tokens by defining a clear color system within your chosen theme to maintain visual consistency.

Why does my Vaadin app have visual drift and inconsistent styles?▼

Visual drift in Vaadin apps is usually caused by mixing Aura and Lumo tokens. Resolving inconsistent theming requires selecting a single theme and applying consistent design tokens across the application.

Can I use both Aura and Lumo themes simultaneously in one Vaadin 25 app?▼

Mixing Aura and Lumo themes in a single Vaadin 25 app is not recommended. Using both causes mixed tokens and visual drift, so you should define and load only one theme for your UI skin.

Do I need design tokens to scale a Vaadin UI design system?▼

Yes, design tokens are required to scale a Vaadin UI design system. Token-based theming provides the foundational primitives needed to maintain consistent color systems when prototyping and expanding your app.