skills.rest
vaadin
vaadinOFFICIAL
Explore all skills by this author →
Website𝕏@vaadinGitHub

theming

Guide Vaadin 25 theme selection and custom stylesheet implementation.

11|3|Updated Feb 26, 2026
Search Tags:#theming#aura#dark-mode#design-tokens#utility-classes#vaadin#lumo
One-click install
npx skills add https://github.com/vaadin/claude-plugin --skill theming-vaadin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: theming
Source: https://github.com/vaadin/claude-plugin/tree/main/skills/theming
Command: npx skills add https://github.com/vaadin/claude-plugin --skill theming-vaadin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps Vaadin developers choose, configure, and customize a consistent theme in Vaadin 25 so applications look cohesive across light and dark modes without brittle CSS hacks or mixed theme tokens.

Core Features & Use Cases

  • Guidance for choosing between Aura and Lumo based on visual style and customization needs.
  • Detailed token and utility-class patterns for colors, typography, spacing, elevation, and component theme variants.
  • Dark mode strategies, theme loading order with AppShellConfigurator, ::part() styling practices, and recipes for building reusable theme stylesheets.
  • Use case: migrate an existing app to a compact Lumo preset with utility classes and custom primary colors, or create a minimal Aura-based theme that adapts automatically to OS color scheme.

Quick Start

Create a Vaadin 25 theme by choosing Aura or Lumo, list the required design tokens and theme variants, specify the @StyleSheet ordering, and produce a short example for styles/my-theme.css.

Frequently Asked Questions about theming

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

FAQPage Schema
How do I customize Vaadin 25 theme tokens for dark mode and light mode?▼

To customize Vaadin 25 theme dark mode and light mode, you modify design tokens and apply utility classes using AppShellConfigurator @StyleSheet usage. This ensures applications look cohesive across modes without brittle CSS hacks or mixed theme tokens.

What's the best way to choose between Aura and Lumo themes for a Vaadin application?▼

Choosing between Aura and Lumo themes depends on your visual style and customization needs. Aura offers a modern aesthetic, while Lumo provides extensive token and utility-class patterns for colors, typography, spacing, and component theme variants.

How do I apply custom CSS to Vaadin components using ::part selectors?▼

To apply custom CSS to Vaadin components, use ::part() styling practices within your theme stylesheets. This targets component internals safely, adhering to Lumo and Aura styling recipes while maintaining theme loading order with AppShellConfigurator.

Can I use utility classes to configure a compact Lumo preset in Vaadin 25?▼

Yes, you can configure a compact Lumo preset in Vaadin 25 using utility classes. This allows rapid migration of existing apps by defining custom primary colors, spacing, and typography through design tokens for consistent styling.

Does Vaadin 25 theming support automatic adaptation to the OS color scheme?▼

Vaadin 25 theming supports automatic adaptation to the OS color scheme. By creating a minimal Aura-based theme with proper design tokens and dark mode strategies, the application adjusts seamlessly without manual CSS overrides.

Related Skills

Explore More Software Engineering Skills→
marcushellbergmarcushellberg
6

theming

Configure Vaadin 25 theme loading with @StyleSheet and ColorScheme.

Community
Intermediate
UiPathUiPath
18

apollo-prototype

Build React 19 TypeScript Tailwind CSS 4 UI mockups with Apollo Wind semantic tokens and shadcn components.

Official
Intermediate
vaadinvaadin
11

frontend-design

Stylize Vaadin 25 Java/Flow views with theme tokens and component-level CSS.

Official
Intermediate
Insik-HanInsik-Han
16

uniwind

Translate Tailwind-like classNames into React Native styles.

Community
Advanced