JMIX 2.0 - Theme settings

Support
#1

Hi, I want to ask about the theme options in the new version 2.0.

Now in version 1.5 we are using a customized theme according to our need, but I haven’t found any documentation for theme settings for version 2.0. Will it still be possible to change or modify the theme according to our need or this feature will no longer be available?

Thanks
Pavel

#2

Hi,

Documentation doesn’t have themes description for now. So below short description:

Applying a Theme

The application theme is applied using the @Theme annotation with the name of the theme folder as a parameter. The @Theme annotation must be placed on the class that implements the AppShellConfigurator interface. By default, it’s the main application class.

@Theme(value = "my-theme")
public class MyProjectApplication implements AppShellConfigurator {
    ...
}

The theme variant can be provided as an additional parameter, e.g. dark or light.

@Theme(value = "my-theme", variant = "dark")
public class MyProjectApplication implements AppShellConfigurator {
    ...
}

Note: themes cannot be switched run-time. Even though a project may contain multiple themes, only one can be applied to the UI.

Vaadin doc
However, there are ways to switch between variants of the same theme, load dynamically additional styles on top of the theme.

Application Theme

For use in an application, the theme folder is placed inside the <project_root>/frontend/themes folder, with a name of your choosing. Jmix application projects created by Studio have a predefined theme folder with the same name as the project itself.

my-project - the theme folder, also used as theme name
styles.css - the master stylesheet
my-project.css - an entry point for custom styles and imports
theme.json - a theme configuration file. By default, defines jmix-lumo as the parent theme.

The master stylesheet, styles.css is the entry point to the theme styles. All CSS, including Lumo style property values and custom component styles, can be added there.

It can be useful to split CSS into multiple stylesheets, to avoid creating a mess in the master stylesheet. Additional stylesheets are loaded through @import directives. By default, the project’s master stylesheet contains a single import of <theme-name>.css file that can be used to define your styles and other imports.

styles.css

@import url('./my-project.css');
1 Like
#3

Hi, thank you for the information, it’s perfect. I’m glad we can still edit the base theme, because our colleagues want some other colors.
Pavel