Vaadin 10/ Lumo流主题化

Question

我在理解Vaadin 10主题时遇到了一些困难:我已经阅读了现场的所有文档，但我无法解决我的问题。

例如:如果我从零开始启动一个普通的Vaadin 8应用程序，当我停止服务器时，就会从断开连接得到一个很好的通知：

​

​

但是有了一个新的Vaadin 10入门(项目基础)，我得到了这个丑陋的通知。

​

这两个应用程序都是标准的，不需要从Vaadin启动程序进行任何编辑。我试着玩了共享风格的. with，但没有成功。

我的问题，所有的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>