从 Lumo 迁移到 Aura
Jmix 3 使用 Aura 作为新项目的默认主题，并继续支持 Lumo。升级 Jmix 2 应用程序后，可以保留 Lumo 或迁移到 Aura。
最简单的迁移方式是使用一个新的 Jmix 3 Aura 项目作为参考。其中生成的文件提供了标准视图的正确主题结构和样式。
创建参考项目
创建一个空白项目，使用与升级后应用程序相同的 Jmix 版本。选择 Aura 作为主题。
在迁移期间保持此项目打开。需要复制其中的主题文件，并将标准视图 XML 与应用程序中的 XML 进行比较。
复制 Aura 主题
将参考项目中生成的 Aura 主题目录复制到升级后的项目：
src/main/resources/META-INF/resources/themes/<reference-project>-aura将复制的目录重命名为 <application-name>-aura。其中：
-
将
<reference-project>.css重命名为<application-name>.css。 -
更新
styles.css中的最后一个导入，使用新的文件名。
生成的目录应如下所示：
src/main/resources/META-INF/resources/themes/<application-name>-aura
├── <application-name>.css
├── styles.css
└── view
├── login-view.css
├── main-view-top-menu.css
└── main-view.css|
在迁移完成之前，保持旧的 Lumo 主题不变作为参考。不要将其生成的视图样式复制覆盖到 Aura 文件上。 |
启用 Aura
在应用程序主类中，移除 @Theme 注解以及 Lumo 相关的导入或样式表注解。
添加以下导入：
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.theme.aura.Aura;
import io.jmix.flowui.theme.aura.JmixAura;按以下顺序添加 Aura 样式注解：
@StyleSheet(Aura.STYLESHEET)
@StyleSheet(JmixAura.STYLESHEET)
@StyleSheet("themes/<application-name>-aura/styles.css")更新标准视图
将应用程序的主视图和登录视图 XML 与参考项目中对应的 XML 进行比较。复制缺失的主题相关类名，同时保留应用程序中自定义的内容。
例如，生成的主视图在 appLayout 设置了 jmix-main-view-app-layout；在 initialLayout 设置了 jmix-initial-layout。
较旧的主视图可能使用 Lumo 工具类来定位 userMenu：
<userMenu id="userMenu"
themeNames="tertiary"
classNames="ms-auto me-m">将其替换为生成的 Aura 主视图样式所使用的 css 类：
<userMenu id="userMenu"
themeNames="tertiary"
classNames="jmix-main-view-user-menu">迁移自定义样式
将自定义的 CSS 从旧主题移动到 <application-name>.css。同时需要复制这些样式使用的图像、字体和其他资源。将这些 CSS 的导入保持在 styles.css 文件的最后，以便可以覆盖生成的视图样式。
检查迁移后的代码中以下 Lumo 特定功能：
- Lumo 工具类
-
Aura 不包含 Lumo 工具类。将
LumoUtility常量和 Lumo 工具类名替换为组件 API、自定义 CSS 类或io.jmix.flowui.theme.StyleUtility中的合适常量。 - CSS 自定义属性
-
根据用途替换
--lumo-*属性。并非每个 Lumo 属性都有直接替代。尽可能使用通用的--vaadin-*属性，在主题特定范围内的设置则使用 Aura 属性。自定义项 Aura 属性 强调色（Accent color）
--aura-accent-color-light和--aura-accent-color-dark应用程序背景
--aura-background-color-light和--aura-background-color-dark字体和大小
--aura-font-family和--aura-base-font-size边框圆角
--aura-base-radius组件密度
--aura-base-size请参阅 Aura 主题参考 获取完整的属性列表。
- 组件自定义
-
检查带有
LUMO_前缀的主题样式和 Java 常量。将规则从旧的components目录移动到应用样式表中，因为 Vaadin 25 默认不再注入这些规则。请参见 UI 组件的样式。 - 浅色和深色样式
-
将自定义颜色替换为 Aura 颜色属性或 CSS
light-dark()函数。像html[theme~='dark']这样的选择器不覆盖LIGHT_DARK和DARK_LIGHT系统模式。请参见 编写颜色方案感知的 CSS。
重新构建和测试
在重新构建前端包之前删除生成的文件：
./gradlew clean vaadinClean在开发模式下启动应用程序。检查登录视图、主视图和自定义组件。如果应用支持两种颜色方案，请测试浅色和深色模式。
对于 JAR 部署，测试生产构建：
./gradlew -Pvaadin.productionMode=true bootJar验证应用样式表及其资源在打包后的应用中已加载。