Темы

Темы определяют внешний вид приложения: цвета, типографику, отступы, размеры компонентов и другие визуальные свойства.

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 использует описанную выше модель таблиц стилей. Файлы в старом расположении могут работать в режиме разработки, но быть недоступными в production-сборке. Инструкции по миграции см. в Миграция с Lumo на Aura.

Темы в Studio

Studio отображает файлы темы приложения в разделе User Interface → Styles окна инструментов Jmix.