Тема Lumo

Тема Lumo — исходная тема Vaadin. Она содержит стили для всех компонентов Vaadin, CSS-свойства для настройки и дополнительные служебные классы.

Jmix добавляет собственные стили Lumo для компонентов Jmix и стандартных экранов Jmix.

Применение 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 предоставляет CSS-свойства с префиксом --lumo-. Компоненты Vaadin также предоставляют общие и специфичные для компонентов свойства с префиксом --vaadin-.

Добавляйте свойства темы в CSS-файл приложения в каталоге активной темы Lumo. Например, в 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 предоставляет классы для фонов, границ, размеров, отступов, типографики, макетов Flexbox и Grid и других распространенных стилей.

Служебные классы Lumo не входят в Lumo.STYLESHEET. Чтобы использовать их, добавьте @StyleSheet(Lumo.UTILITY_STYLESHEET) сразу после @StyleSheet(Lumo.STYLESHEET):

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

Используйте служебные классы через XML-атрибут classNames, а не создавайте пользовательское CSS-правило. Например, следующие классы добавляют средний отступ между элементами и средний внутренний отступ:

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

Полный список см. в справочнике служебных классов Lumo.

При использовании служебных классов Lumo в Java используйте соответствующие константы из com.vaadin.flow.theme.lumo.LumoUtility.

Стили Jmix Lumo также содержат независимые от темы служебные классы Jmix. Их Java-константы определены в классе io.jmix.flowui.theme.StyleUtility.

Служебные классы Lumo предназначены главным образом для HTML-элементов, компонентов компоновки и пользовательских структур UI. Они не могут напрямую стилизовать элементы внутри Shadow DOM компонента. Для внутренних элементов компонента используйте свойства стилей компонентов или документированные селекторы. Примеры см. в разделе Стилизация частей компонентов.

Цветовые схемы

Lumo поддерживает светлую и темную цветовые схемы. См. Переключение цветовой схемы.

Компактный набор стилей

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

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