Themes

Themes define the visual presentation of the application. A theme includes styles for colors, typography, spacing, component sizes, and other visual properties.

Jmix supports the following Vaadin themes:

  • Aura is the default theme for new Jmix projects.

  • Lumo is available for applications that need the Lumo look and feel or are migrating from an earlier Jmix version.

Application Theme Files

The Jmix-specific Aura and Lumo stylesheets are provided by the following dependency:

dependencies {
    implementation 'io.jmix.flowui:jmix-flowui-themes'
}

This dependency contains styles for Jmix components, standard views, and add-ons, as well as Jmix icons and utility classes.

Application theme files are static resources located in the src/main/resources/META-INF/resources/themes directory. A project created in Studio contains separate directories for Aura and Lumo styles.

For example:

src/main/resources/META-INF/resources/themes
├── my-project-aura
│   ├── my-project.css
│   ├── styles.css
│   └── view
│       ├── login-view.css
│       ├── main-view-top-menu.css
│       └── main-view.css
└── my-project-lumo
    ├── my-project.css
    ├── styles.css
    └── view
        ├── login-view.css
        ├── main-view-top-menu.css
        └── main-view.css

The files have the following purpose:

  • styles.css is the entry point for the application styles. The main application class loads this file using @StyleSheet.

  • my-project.css contains custom application styles. Add your styles to this file.

  • The view directory contains styles for the login view and main view created by Studio.

The generated styles.css imports the predefined view styles first and the application styles last:

@import url('view/main-view.css');
@import url('view/main-view-top-menu.css');
@import url('view/login-view.css');
@import url('my-project.css');
In Jmix 2.x projects, application theme files were located in src/main/frontend/themes and loaded using the @Theme annotation. This approach is deprecated in Vaadin 25. Jmix 3 uses the stylesheet model described above. Files left in the old location may work in development mode but be unavailable in a production build. See Migrating from Lumo to Aura for migration instructions.

Themes in Studio

Studio displays application theme files in the User Interface → Styles section of the Jmix Tool Window.