Vaadin 中 Lumo 变量的详尽列表

Question

我想为我的 Vaadin 20 应用做 custom theme 变体。为此，我将为可用的 Lumo CSS 变量提供自定义值，例如 --lumo-base-color 和 --lumo-primary-color。问题是我找不到可用变量的详尽列表。

我的问题是：

在哪里可以找到所有主题化变量的列表？
是否有一个很好的主题示例，其中设置了很多这些变量，我可以用作示例？

Answer 1

这是一个很好的问题，因为通过重新定义 Lumo CSS 变量的值开始在高层自定义应用程序通常是最佳做法。

例如ComboBox下拉按钮、文本字段清除图标、DatePicker弹出按钮等元素都使用变量--lumo-contrast-60pct。很容易在shared global css中定义它的值，新颜色将被所有组件一致使用。这比为每个组件定义自定义 css 更好。请参见下面的示例，其中原始石墨灰色已更改为蓝色。

在design system foundation documentation中，每个小节都会列出可用的变量。

此外，如果您检查浏览器开发工具中的 <html> 元素，您可以看到它们也列在那里。

在 Lumo theme editor demo 中，您可以根据需要更改任意数量的样式。然后它允许您下载一个文件，其中列出了您更改的所有变量。

另一个选项是 https://start.vaadin.com，您还可以在其中自定义主题的某些方面，下载的应用程序将包含这些定义。

Answer 2

在您的运行应用程序中，您可以将类似于以下丑陋片段的内容粘贴到您的 DevTools 控制台中，以输出所有 Lumo 自定义变量及其当前值：

[...document.styleSheets].forEach((sheet) =>
  [...sheet.cssRules]
    .filter((rule) => rule.type === 1)
    .forEach((rule) =>
      [...rule.style]
        .filter((style) => style.startsWith("--lumo"))
        .forEach((style) => console.log(style + ": " + rule.style.getPropertyValue(style)))
    )
);

这会向您的控制台发送类似

的垃圾邮件

--lumo-border-radius-s:  1em
--lumo-base-color:  hsl(214, 35%, 21%)
--lumo-tint-5pct:  hsla(214, 65%, 85%, 0.06)
--lumo-tint-10pct:  hsla(214, 60%, 80%, 0.14)
...

您可能想要调整代码段以生成更有用的内容，具体取决于您是想仅将其用作参考，还是复制并粘贴到您的主题中。

Vaadin 中 Lumo 变量的详尽列表

Extensive list of Lumo Variables in Vaadin

vaadin

vaadin-flow

vaadin-lumo