Generate and customize Vaadin Aura theme CSS configurations. Use when the user wants to create a new theme, adjust visual styles, customize a design system, pick colors, change typography, or configure the look and feel of a Vaadin application using the Aura theme. Triggers on requests like "create a theme", "make it look more modern", "use dark mode with emerald accents", "compact dense layout", or any visual design system configuration for Vaadin/Aura.
Generate and customize Vaadin Aura theme CSS configurations. Use when the user wants to create a new theme, adjust visual styles, customize a design system, pick colors, change typography, or configure the look and feel of a Vaadin application using the Aura theme. Triggers on requests like "create a theme", "make it look more modern", "use dark mode with emerald accents", "compact dense layout", or any visual design system configuration for Vaadin/Aura.
Aura Theme Generator
Generate Vaadin Aura theme CSS files from free-form descriptions.
Workflow
Interpret the user's description — identify the intended colors, mood, density, typography, layout, surface hierarchy, semantic brand colors, and any component-specific styling needs.
Review relevant references based on what was identified in step 1:
Read references/components.md only when component-specific styling (e.g., Grid) was identified in step 1.
Map each interpreted aspect to Aura properties using values from the references (always consider: surface level/opacity, app layout inset, font family, border radius; rarely: palette colors for semantic states; only when explicitly mentioned: component properties)
Locate the styles.css file (default: /src/main/resources/META-INF/resources/styles.css)
Name the file descriptively
Create the theme CSS file in the same directory as styles.css
Add an @import statement to styles.css to import the new theme file
Border radius: Be conservative. Small components (buttons, inputs) use the same value. --aura-base-radius: 7 is very rounded — only use when explicitly requested.
Colorful backgrounds: When the user wants a vibrant/colorful UI, use the Accent background option with oklch formulas (see reference) instead of named backgrounds.
Color palette adjustment: Adjust palette colors (--aura-red, --aura-green, etc.) to match the overall style (muted, bright, brand-specific). Keep color hues consistent (red stays red-ish, green stays green-ish) but adjust tone/saturation. Text colors are automatically derived.
User colors adjustment: Adjust user color palette (--vaadin-user-color-*) to match the overall style for consistent visual appearance in avatars and charts.
Component styling: Include side nav and button patterns proactively for polished app themes — they appear in the majority of quality reference themes. Grid properties only when explicitly mentioned.
Surface level/opacity: Consider visual hierarchy needs. --aura-surface-level: -0.5 (flat) is common in modern themes. Pair with card elevation scoping when needed.
Content color scheme:--aura-content-color-scheme: light dark allows the content area to follow the system preference, commonly combined with a fixed dark or light color-scheme for the nav.
App layout inset: Always use a unit (0px not 0). This is required for CSS calc() functions.
Fonts: Use only the curated fonts from the reference. Each has a pre-defined import URL.
Output Rules
Only include non-default properties. Omit anything that matches the default value.
Always pair light and dark accent colors from the same hue family.
Always pair light and dark background colors — either by name (Zinc/Zinc) or using the Accent option with matching oklch formulas.
Include @import for fonts using the exact URL from the curated font list when a custom font family is set.
Core Aura properties go on the html selector. Additional component token overrides that apply globally may use a second html {} block.
Include color-scheme on html when not using the default (light).
Use preset values from the reference for sizes, radii, contrast, surface levels, and surface opacity. Custom hex colors are only allowed when the user explicitly requests a specific color not in the presets.
App layout inset must include a unit (e.g., 0px not 0).
Include side nav and button component patterns for any general app theme unless the user says the app has no navigation or custom button styles. These patterns come directly from the reference themes.
Scope --aura-surface-level to vaadin-card, vaadin-dashboard-widget when the global surface level is flat (-0.5) but cards need to stand out.
File Naming
Name the output CSS file descriptively based on its configuration. Patterns:
Omit the @import line if no custom font. Omit any property that uses its default value. Sort properties alphabetically within each block. Include only the sections relevant to the generated theme.
Examples
Refer to the reference CSS files for full, complete, idiomatic examples — they are the gold standard:
