Vaadin 10 /与Lumo流动

Question

我在理解Vaadin 10主题时遇到了一些麻烦:我已经在网站上阅读了所有文档,但我无法解决我的问题.

例如:如果我从头开始使用普通的Vaadin 8应用程序,当我停止服务器时,我会收到断开连接的通知:

但是对于一个新的Vaadin 10启动器(项目基础),我得到了这个丑陋的通知

这两个应用程序都是标准的,没有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>