Aura Theme

The Aura theme is the default Vaadin theme for new Jmix projects. It provides styles for all Vaadin components and a set of CSS properties for changing colors, typography, sizes, spacing, and shapes.

Jmix adds its own Aura stylesheet for Jmix components and standard Jmix views.

Applying Aura

An Aura application loads styles in the following order:

  1. The Vaadin Aura stylesheet provides styles for Vaadin components.

  2. The Jmix Aura stylesheet provides styles for Jmix components and standard Jmix views.

  3. The application stylesheet provides project-specific styles.

The order matters because styles loaded later can override styles loaded earlier. Each layer corresponds to a @StyleSheet annotation:

@StyleSheet(Aura.STYLESHEET)
@StyleSheet(JmixAura.STYLESHEET)
@StyleSheet("themes/my-project-aura/styles.css")
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

Application Files

Aura application styles are located in:

src/main/resources/META-INF/resources/themes/my-project-aura

See Application Styles for the complete directory structure.

Customizing Aura

Use the Aura Theme Editor to configure the theme and export the CSS. Use the exported properties in your application as shown below.

Aura provides CSS properties with the --aura- prefix. Vaadin components also provide common and component-specific properties with the --vaadin- prefix.

Add theme properties to the application CSS file in the active Aura theme directory. For example, add them to src/main/resources/META-INF/resources/themes/my-project-aura/my-project.css.

Set the properties on the html element to apply them to the whole application:

src/main/resources/META-INF/resources/themes/my-project-aura/my-project.css
html {
    --aura-accent-color-light: #006b57;
    --aura-accent-color-dark: #72d5bb;
    --aura-base-font-size: 15;
    --aura-base-radius: 4;
    --aura-base-size: 20;
}

See the Aura documentation for the complete property reference.

See Styling UI Components for ways to style UI components.

Utility Classes

Utility classes are predefined CSS classes for common styling tasks. Apply them using the classNames XML attribute instead of writing a custom CSS rule.

Aura provides a focused set of theme-specific utility classes for accent and surface colors. For example, aura-accent-red and aura-accent-purple change the accent color of an element, while aura-surface and aura-surface-solid apply an Aura surface color.

<button text="Delete" classNames="aura-accent-red"/>

See the Aura color reference for the complete list of Aura color classes and their usage.

When applying Aura utility classes in Java, pass their class names to addClassName() or addClassNames().

The Jmix Aura stylesheet also includes theme-independent Jmix utility classes. Their Java constants are defined by the io.jmix.flowui.theme.StyleUtility class.

Color Schemes

Aura supports light and dark color schemes. You can select a fixed color scheme or allow users to switch between light, dark, and system settings.

See Switching Color Scheme.