Aura 主题

Aura 主题 是新 Jmix 项目的默认 Vaadin 主题。为所有的 Vaadin 组件提供样式，并提供了一组 CSS 属性，可以更改颜色、文字排版、大小、间距和形状。

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

使用 Aura

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

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

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

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

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

@StyleSheet(Aura.STYLESHEET)
@StyleSheet(JmixAura.STYLESHEET)
@StyleSheet("themes/my-project-aura/styles.css")
public class MyProjectApplication implements AppShellConfigurator {
    // ...
}

应用程序文件

Aura 应用程序样式位于：

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

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

自定义 Aura

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

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

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

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

src/main/resources/META-INF/resources/themes/my-project-aura/my-project.css
html {
    --aura-accent-color-light: #006b57;
    --aura-accent-color-dark: #72d5bb;
    --aura-base-font-size: 15;
    --aura-base-radius: 4;
    --aura-base-size: 20;
}

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

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

强调色和表面色类名

Aura 提供了 CSS 类名，可以为组件或自定义 UI 元素配置强调色（accent）和表面色（surface）。使用 classNames XML 属性配置。

例如，aura-accent-red 和 aura-accent-purple 配置元素的强调色，而 aura-surface 和 aura-surface-solid 配置 Aura 表面色。

<button text="Delete" classNames="aura-accent-red"/>

完整的 Aura 颜色类列表及其用法，请参见 Aura 参考。

在 Java 中配置 Aura 类名时，请使用 addClassName() 或 addClassNames()。

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

配色方案

Aura 支持浅色和深色配色方案。可以选择特定的配色方案，或者支持用户在浅色、深色和随系统配置之间切换。

请参见 切换配色方案。