java - Vaadin 10/使用Lumo进行流主题化

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

例如：如果我从头开始启动普通的Vaadin 8应用程序，则当我停止服务器时，会收到断开连接的通知：



但是有了新的Vaadin 10入门版（项目基础），我收到了这个丑陋的通知


这两个应用程序都是标准的，无需Vaadin入门者进行任何编辑。
我尝试过使用shared-styles.html，但没有成功。

我的问题，所有vaadin 10相关：


Lumo主题是默认外观还是因为我缺少某些导入或设置而看起来是这样？
如何为Lumo主题应用“深色”样式（我是指整个应用程序）？
如何以及在何处应用全局样式变量，例如不同的原色或背景色？


谢谢

最佳答案

这是默认外观。
用@Theme(value = Lumo.class, variant = Lumo.DARK)标记路由器组件。
您可以在样式文件的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>