Ваадин 10/ Поток темы с Lumo

Question

У меня возникли проблемы с пониманием темы Vaadin 10: я прочитал всю документацию на сайте, но не могу решить свою проблему.

Например: если я запускаю простое приложение Vaadin 8 с нуля, когда я останавливаю сервер, я получаю хорошее уведомление от отключения:

Но с новым Vaadin 10 Starter (база проекта) я получаю это уродливое уведомление

Оба приложения являются стандартными без каких-либо правок от Vaadin. Я пытался играть с shared-styles.html, но безуспешно.

Мои вопросы, все vaadin 10, связанные:

1. Является ли тема Lumo с этим внешним видом по умолчанию, или она выглядит так, потому что мне не хватает некоторых импортов или настроек?
2. Как я могу применить "темный" стиль для темы Lumo (я имею в виду все приложение)?
3. Как и где я могу применить глобальную переменную стиля, например, другой основной цвет или цвет фона?

Спасибо

Answer 1

1. Это внешний вид по умолчанию.
2. Пометьте компоненты маршрутизатора с помощью @Theme(value = Lumo.class, variant = Lumo.DARK),
3. Вы можете использовать пользовательские свойства CSS Lumo в правиле CSS в файле стилей. Например: html{--lumo-base-color: aliceblue;},

Пример использования @Theme аннотации по обычному MainView учебный класс:

@Route ( "" )
@Theme ( value = Lumo.class, variant = Lumo.DARK )  // ⬅ Add annotation 
public class MainView extends VerticalLayout { … }

А вот как вы можете настроить уведомление о разъединении:

<custom-style>
  <style>
    html {
      --lumo-base-color: aliceblue;
    }

    .v-reconnect-dialog {
      visibility: visible;
      border: 1px solid lightslategray;
      background-color: slategray;
      color: lightgray;
      box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, .4);
      border-radius: 4px;
    }

    .custom {
      color: lightskyblue;
    }
  </style>
</custom-style>