主题

主题定义应用程序的视觉呈现。主题包括颜色、文字排版、间距、组件大小及其他视觉属性的样式。

Jmix 支持以下 Vaadin 主题：

  • Aura 是新 Jmix 项目的默认主题。

  • Lumo 适用于需要 Lumo 外观和感受，或从早期 Jmix 版本迁移的应用程序。

应用程序主题文件

Jmix 特定的 Aura 和 Lumo 样式由以下依赖提供：

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

该依赖包含 Jmix 组件、标准视图和扩展组件的样式，以及 Jmix 图标和工具类。

应用程序主题文件是静态资源，位于 src/main/resources/META-INF/resources/themes 目录。在 Studio 中创建的项目会包含用于 Aura 和 Lumo 样式的独立目录。

示例：

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

这些文件的作用如下：

  • styles.css 是样式的入口文件。应用程序主类通过 @StyleSheet 加载此文件。

  • my-project.css 包含自定义样式。自定义样式请修改此文件。

  • view 目录包含 Studio 生成的登录视图和主视图样式。

生成的 styles.css 先导入预定义的视图样式，最后导入项目中的样式：

@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');
在 Jmix 2.x 项目中，应用程序主题文件位于 src/main/frontend/themes，并通过 @Theme 注解加载。此方式在 Vaadin 25 中已弃用。Jmix 3 使用上文所述的样式表模型。遗留在旧位置的文件可能在开发模式下正常工作，但在生产构建中无法使用。迁移说明请参见 从 Lumo 迁移到 Aura。

Studio 中的主题

Studio 在 Jmix 工具窗口 的 User Interface → Styles 部分中显示应用程序主题文件。