Update Lumo to Aura in an existing project

I see, people are struggling with the Jmix 3.0 update concerning css/Aura theme.

As we have no guidance how to update an existing Lumo to Aura theme, I write down how I did update my projects. I don’t know if this is the way, but this how it did work for me. Happy for any additional input or enhancement !

  1. Create a new testproject with the theme aura. No need to add anything else.

  2. Open your ProjectName project and migrate it to Jmix 3.0

  3. Move the src/main/frontend/themes directory (including all subdirectories) to src/main/resources/META-INF/resources/themes

  4. In the AppShellConfigurator delete the following line
    // @Theme(“ProjectName”)

  5. In the AppShellConfigurator add the following lines
    @StyleSheet(Aura.STYLESHEET)
    @StyleSheet(JmixAura.STYLESHEET)
    @StyleSheet(“themes/ProjectName/styles.css”)

  6. copy the following files from testproject/src/main/resources/META-INF/resources/themes/testproject-aura/view to your /src/main/resources/META-INF/resources/themes/ProjectName/view
    → login-view.css
    → main-view.css
    → main-view-top-menu.css

  7. check your styles.css, to ensure, your ProjectName.css is the last one
    @import url(‘view/main-view.css’);
    @import url(‘view/main-view-top-menu.css’);
    @import url(‘view/login-view.css’);
    @import url(‘ProjectName.css’);

  8. in your ProjectName.css replace all --lumo references with --aura references.
    Basically I suggest to start with the css below, as a lot of features we had to struggle in Lumo, look already great in Aura

html {
  --aura-accent-color-light: #3d6b3d;  
  --aura-accent-color-dark:  #3d6b3d;

  --aura-background-color-light: #f3f1f1;
  --aura-base-font-size: 15;
  --aura-base-radius: 2;
  --aura-base-size: 20;
  --aura-contrast-level: 2;
  --aura-font-family: var(--aura-font-family-system);

  /*  filter button, graduate progressbar */
  --aura-green: #003a6c;
}

/* the top loading indicator */
.v-loading-indicator {
  background-color: var(–aura-accent-color) !important;
}

This should be all.

9) BUT if you get the following error and a scrambled layout

2026-07-25T12:39:33.828+02:00 ERROR 34824 — [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path threw exception [Request processing failed: java.lang.IllegalStateException: Asset ‘/styles.css’ is not found in project frontend directory, default development bundle or in the application bundle ‘{build}/dev-bundle/assets/’.
Verify that the asset is available in ‘frontend/themes/CRM_II/’ directory and is added into the ‘assets’ block of the ‘theme.json’ file.] with root cause

java.lang.IllegalStateException: Asset ‘/styles.css’ is not found in project frontend directory, default development bundle or in the application bundle ‘{build}/dev-bundle/assets/’.
Verify that the asset is available in ‘frontend/themes/CRM_II/’ directory and is added into the ‘assets’ block of the ‘theme.json’ file.

Copy the src/main/resources/META-INF/resources/themes back to src/main/frontend/themes directory (including all subdirectories) and now all is fine.

In my point of view, this is an error in the implementation from Jmix, but I did not have time to investigate it deeper.

Hopefully, this helps some people.

Regards

Felix

2 Likes