Lumo 主题

Lumo 主题 是最初的 Vaadin 主题。为所有的 Vaadin 组件提供样式，并提供可自定的 CSS 属性，以及可用的工具类。

Jmix 组件和标准的 Jmix 视图也配置了 Lumo 样式。

使用 Lumo

一个使用 Lumo 样式的应用程序按以下顺序加载样式：

  1. Vaadin Lumo 样式表，包含标准的 Lumo 主题。

  2. Jmix Lumo 样式表 为 Jmix 组件和标准 Jmix 视图提供样式。

  3. 应用程序样式表，提供项目特定的样式。

样式加载有顺序要求，因为后加载的样式可以覆盖先加载的样式。每一层对应一个 @StyleSheet 注解：

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

应用程序文件

Lumo 应用程序样式位于：

src/main/resources/META-INF/resources/themes/my-project-lumo

完整的目录结构请参见 应用程序主题文件。

自定义 Lumo

使用 Lumo 主题编辑器 配置主题并导出 CSS。按以下的示例在应用程序中使用导出的属性。

Lumo 提供带 --lumo- 前缀的 CSS 属性。Vaadin 为组件的通用属性和特定属性也提供了带 --vaadin- 前缀的 CSS 属性。

将主题属性添加到 Lumo 主题目录的 CSS 文件中。例如，可以是 src/main/resources/META-INF/resources/themes/my-project-lumo/my-project.css 文件中。

在 html 元素中设置属性，可以将属性应用于整个应用程序：

src/main/resources/META-INF/resources/themes/my-project-lumo/my-project.css
html {
    --lumo-primary-color: #006b57;
    --lumo-primary-text-color: #006b57;
    --lumo-font-family: Arial, sans-serif;
    --lumo-font-size-m: 14px;
    --lumo-border-radius-m: 0.5em;
}

完整的属性请参见 Lumo 文档。

关于为 UI 组件配置样式的方式，请参见 UI 组件的样式。

工具类

工具类是为通用样式任务定义的 CSS 类。Lumo 为背景、边框、尺寸、间距、文本排版、flex 和表格布局以及其他通用样式提供了工具类。

Lumo 工具类不包含在 Lumo.STYLESHEET 中。如需使用，需要在 @StyleSheet(Lumo.STYLESHEET) 之后添加 @StyleSheet(Lumo.UTILITY_STYLESHEET)：

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.UTILITY_STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")

可以直接在 XML 的 classNames 属性中使用工具类名，而无需编写自定义的 CSS 规则。例如，下面代码为 hbox 的子元素配置了中等的间距和内边距：

<hbox classNames="gap-m p-m">
    <span text="First"/>
    <span text="Second"/>
</hbox>

完整的列表请参见 Lumo 工具类参考。

如需在 Java 中使用 Lumo 的工具类，请使用 com.vaadin.flow.theme.lumo.LumoUtility 中对应的常量。

Jmix Lumo 样式表还包括与主题无关的 Jmix 工具类。其中使用的 Java 常量由 io.jmix.flowui.theme.StyleUtility 类定义。

Lumo 工具类主要用于 HTML 元素、布局组件和自定义 UI 结构。不能作用于组件的 shadow DOM 元素。如果需要修改组件 shadow DOM 的样式，需要使用组件的样式属性或文档中的组件内部选择器。示例请参见 组件 parts 的样式。

配色方案

Aura 支持浅色和深色配色方案。参见 切换配色方案.

紧凑样式

Lumo 提供了一个紧凑样式的预设，可以减小字体和组件的尺寸。下面的示例为 Lumo 应用程序添加了紧凑样式：

@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.COMPACT_STYLESHEET)
@StyleSheet(JmixLumo.STYLESHEET)
@StyleSheet("themes/my-project-lumo/styles.css")